4.3. Оптимизация и кодсплиттинг — вендоры

Есть множество подходов оптимизации файлов, попадающих в директорию dist — будь то изображения, шрифты, аудио и видео. Всё это можно сжать без потери качества при помощи webpack.

В этой статье мы расскажем про разбиение кода на вендоры для оптимизации приложения.

Кодсплиттинг — встроенная функция webpack, позволяющая разделить код на части. Впоследствии эти части можно загружать по запросу или параллельно, то есть применять по мере необходимости. Также их можно использовать для получения файлов меньшего размера и управления приоритетами загрузки ресурсов. Всё это существенно влияет на время загрузки приложения в целом.

Давайте возьмём для примера любой проект. Что происходит при сборке? Создаётся один файл с расширением .js в директории dist, и в этом файле «тонна» преобразованного кода размещена в одну строку. Если такую строку отформатировать, получится множество строк кода в одном файле — это нехорошо.

На помощь приходит то самое разделение при сборке с использованием внутренних функций и дополнительных пакетов.

В конфигурации webpack есть поле optimization — оно отвечает за интересующие нас функции. Давайте разберём пример разделения кода в следующей записи:

module.exports = {
 optimization: {
  splitChunks: {
    minSize: 5000,
      cacheGroups: {
      reactVendor: {
        test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom)[\\/]/,
        name: 'reactVendor',
        chunks: 'all',
        priority: 1,
        },
      defaultVendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'defaultVendor',
        chunks: 'all',
        minChunks: 1,
        priority: 0,
        },
      },
    },
  }
}

В webpack v4 функция splitChunks была отдельным пакетом, но сейчас она доступна нам «из коробки». Эта функция автоматически следит за графом зависимостей и проверяет, не дублируются ли зависимости. Но обычный вызов функции нам ничего не даст, поэтому в форме объекта мы добавляем в неё дополнительные поля:

• minSize — отвечает за минимальный размер вендора (чанка). То есть при сборке проекта webpack не станет засыпать нас предупреждениями о превышении размера бандла.

• cacheGroups — позволяет вручную создавать группы вендоров, блоков приложения. Наглядно это выглядит так:

В файле defaultVendor будет лежать код, относящийся к зависимостям из поля dependencies.

reactVendor — зависимости библиотек для React.

Уже знакомое нам поле test отвечает за то, в каком месте будет выполняться поиск зависимостей для их анализа.

name — имя файла на выходе.

chunks — части кода, которые будут загружены синхронно или асинхронно.

all — весь код будет оптимизирован.

priority — приоритет анализа зависимостей, принимает только примитивный тип number. По умолчанию — 0.

minChunks — отвечает за то, сколько раз код может быть разделён.

Таким образом, мы в несколько раз ускоряем время сборки и доставки приложения пользователю.

Принцип разделения кода — основополагающий во всех сборщиках и основанных на них бойлерплейтах. В том числе и бойлерплейтах от крупных компаний, например, Create React App и Angular CLI (ng) имеют «под капотом» хорошо оптимизированный webpack без возможности внесения глобальных корректировок в конфиги.