Code Splitting и vendors.js
  • 2019-05-11
  • 3
  • 0

Code Splitting и vendors.js

В этой статье:

  • Подключим сплиты
  • Оптимизируем JavaScript

Webpack code splitting

Для того чтобы понять зачем нужен code splitting в Webpack`е разберем таблицы:

При обновлении пользователь скачивает по 400 и далее 420 кб при каждом посещении. Webpack code splitting Теперь при обновлении пользователь скачивает по 200кб и далее (в случае если обновятся библиотеки) 420 кб единожды. Webpack code splitting

В исходном файле build/webpack.base.conf.js добавим объект splitChunks как параметр в optimization:

{
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          name: 'vendors',
          test: /node_modules/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  },

И на этом все, теперь в vendors.js будут попадать все файлы импортируемые из node_modules:

Настройка хешей в выходных файлах

Для того чтобы браузер понимал, что файл обновился к нему следует добавлять hash. Сделать это можно следующим образом:

`[name].[hash].js`

Исходный код: https://github.com/vedees/webpack-template