Code Splitting и vendors.js

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

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

Webpack code splitting

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

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

В исходном файле 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