webpack chanks

Code splitting

chunk

Чанк - это код, который выделяется из главного бандла main.js и образует собственный файл, называемый чанком

Есть два типа чанков: синхронные и асинхронные

Синхронные чанки загружаются синхронно с main.js

В результате в исходном коде вы увидите элемент

<script src = "some-chunk.js"> </ script>

Асинхронные чанки загружаются по требованию ( lazy load )

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

Эти чанки выделяются из main.js в зависимости от некоторых условий

Условия, при которых такие чанки создаются, доолжны быть четко сформулированы для Webpack

Для этого у Webpack есть специальный плагин splitChunksPlugin

Чанк вендора создает отдельные файлы для кода поставщика ( код из node_modules)

Достаточно одного файла vendor.js

Любой код вендора, используемый внутри index.js ( при импорте модулей npm ), отделится от него и сформирует vendor.js, который будет загружен синхронно с main.js

Асинхронные чанки

Создайте отдельные файлы для кода, который можно подключать с отложенной загрузкой

Webpack внедряет некоторый код в main.js, который обеспечивает отложенную загрузку асинхронных чанков и предотвращает повторную загрузку одних и тех же чанков

Common Chunk ( разделяемые чанки )

Создайте общий файл common.js из кода, который совместно используется различными чанками

Этот файл будет загружаться синхронно с main.js