Если вы читали отличную статью Hemal Patel о Mysterious SplitChunks Plugin, вы, вероятно, задавали себе тот же вопрос, что и я.

Как включить оптимизацию разделения кода splitChunks.chunks «все» в мой проект?

SplitChunks находит модули, которые являются общими для разных фрагментов, и разбивает их на отдельные фрагменты, чтобы уменьшить дублирование или отделить модули поставщика от модулей приложения.

SplitChunks принимает 3 возможных значения: «начальное», «асинхронное» или «все».

Согласно документации Webpack:

«Предоставление all может быть особенно эффективным, потому что это означает, что куски могут быть разделены даже между асинхронными и неасинхронными фрагментами»

Hemal Patel объясняет это иначе:

«Эй, webpack! Меня не волнует, будет ли это динамически импортированный модуль или нединамически импортированный модуль. Примените оптимизацию ко всем из них. Но убедитесь, что… неа, у вас хватит ума сделать это! »

Разница между точками входа и чанками

Пункты въезда

Пункт (а) для входа в приложение. Здесь приложение начинает выполняться. Если передан массив, все элементы будут выполнены.

Динамически загружаемый модуль не является точкой входа.

Простое правило: одна точка входа на HTML-страницу. СПА: одна точка входа. MPA: несколько точек входа (согласно документации Webpack).

Пример точек входа в многостраничном приложении

module.exports = {
  //...
  entry: {
    home: './home.js',
    about: './about.js',
    contact: './contact.js'
  }
};

Куски

«Чанк» - это термин, специфичный для Webpack, который используется внутри компании для управления процессом связывания. Webpack составляет пакеты из кусков. Чанки автоматически генерируются Webpack из списка точек входа.

1. Конфигурация Webpack

Когда вы включаете эту оптимизацию в конфигурацию Webpack, она должна выглядеть так:

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all'
      name: false
    }
  }
};

Параметр name соответствует имени разделенных фрагментов. Если указать true, имя будет автоматически сгенерировано на основе фрагментов и ключа группы кеширования. Я настоятельно рекомендую вам включить эту опцию для отладки только во время разработки.

Теперь Webpack автоматически проанализирует общий код и зависимости между вашими файлами (CSS и Javascript) и сгенерирует новые блоки, связанные с этими точками входа.

Теперь вопрос:

Какая связь между точкой входа и соответствующим чанком (ами)?

Плагин HtmlWebpackPlugin генерирует HTML-файлы с точками входа, но без чанков. Кроме того, этот плагин не подходит для многостраничного приложения, он требует создания экземпляра для каждой точки входа, а это не оптимально для производительности сборки.

После нескольких дней поиска в Интернете лучшего решения для интеграции оптимизации разделения кода в мой проект я наконец решил написать собственный плагин.

2. Установите ChunksWebpackPlugin.

ChunksWebpackPlugin создает файлы HTML для обслуживания пакетов Webpack. Это очень удобно для нескольких точек входа и работает без конфигурации для базового использования. Для более сложного использования доступны крючки для большей гибкости.

Вся документация доступна на Github и npm.

npm install --save-dev chunks-webpack-plugin

3. Включает ресурсы в ваши шаблоны

Включите каждый HTML-файл на соответствующую страницу, как в примере ниже:

<!DOCTYPE html>
<html>
  <head>
    <?php include 'home-styles.html'; ?>
  </head>
  <body>
    <?php include 'home-scripts.html'; ?>
  </body>
</html>

Вы можете изменить многие параметры, включая путь, имя, язык и содержимое выходных файлов. Этот пример написан на PHP, но работает с TWIG и все другие языки.

Сгенерированные файлы HTML содержат теги сценариев и стилей с упорядоченным списком всех фрагментов, связанных с точкой входа, а также самой точкой входа.

Пример содержимого файла home-styles.html:

<link rel="stylesheet" href=".styles/0.cfcccdf4f79b40e.css" />
<link rel="stylesheet" href=".styles/home.cfcccdf4f79b40e.css" />

Пример содержимого файла home-scripts.html:

<script defer src="./scripts/1.cfcccdf4f79b40e.js"></script>
<script defer src="./scripts/0.cfcccdf4f79b40e.js"></script>
<script defer src="./scripts/home.cfcccdf4f79b40e.js"></script>

4. Отладка с помощью WebpackBundleAnalyzer.

Используйте пакет WebpackBundleAnalyzer, чтобы понять, как ваш код разделяется.

В заключение,

Я интегрировал разбиение кода с помощью плагина ChunksWebpackPlugin в несколько проектов, включая сайт Télé-Loisirs, и очень доволен результатом!

Большое спасибо команде Webpack за отличную документацию, а также за различные обсуждения и сообщения в блогах сообщества, без этого я бы не справился с этим.