[Перевод] webpack 4: оптимизация разделения кода и чанков

Оригинальный адрес:webpack 4: Code Splitting, chunk graph and the splitChunks optimization
Оригинальный автор:Tobias Koppers
Переводчик:arzh
Рекомендуемая причина: отwebpack3обновитесь доwebpack4Внесены важные изменения

webpack4правильноchunkГрафик имеет несколько значительных улучшений, иchunkSplit добавляет новую оптимизацию (это дляCommonsChunkPluginулучшение)

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

На старой схемеchunksчерез детско-родительские отношения иchunksСодержит модули для подключения другихchunks

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

Опорная точка на входе или асинхронной точке разделенияchunkсписок, этиchunksбудет загружаться параллельно.

Этот тип диаграммы делает разделениеchunksстановится очень трудным, например, использованиеCommonsChunkPluginБудет такая проблема при удалении одного или несколькихchunksмодули и поместите их в новыйchunk, этот новыйchunkНужно переподключиться к схеме, но как? Как родитель старого куска или как ребенок?CommonsChunkPluginДобавить его в качестве родителя, но это технически неправильно, а также негативно влияет на другие оптимизации (информация о родителях неточна).

новыйchunkНа диаграмме вводится новый объект:ChunkGroup,ОдинChunkGroupсодержит несколькоchunk

Ссылка на одиночную точку входа или асинхронную точку разделенияChunkGroup, а это значит, что всеChunkGroupвключеныchunkВсе загружаются параллельно. Одинchunkможно ссылаться на несколькоChunkGroupin (но не загружается несколько раз)

Теперь больше не используйте отношения родитель-потомок для связыванияchunk, но черезChunkGroupассоциировать

СейчасchunksСегментацию можно понять, недавно добавленныйchunksбудут добавлены ко всем, содержащим оригинальныеchunkизChunkGroups, это не оказывает негативного влияния на родительскую иерархию.

Теперь, когда это исправлено, мы можем начать использовать его большеchunkРазделенные, мы можем разделить по желаниюchunkне волнуйсяchunkизображение будет уничтожено

CommonsChunkPluginЕсть много вопросов:

1. загрузит код, который нам не нужен
2. в асинхронном режимеchunksнеэффективен
3. будет сложнее использовать
4. Трудно понять на практике

Так родились новые плагины:SplitChunksPlugin

это может пройтиheuristicsАвтоматически определяйте модули, которые должны быть разбиты на части, используя количество повторов модулей и категории модулей (например,node_modules), разделятьchunks

Вот метафора для обоих.CommonsChunkPluginНапример: «Создайтеchunkи будет соответствоватьminChunksчтобы переместить все модули в новый блок",SplitChunksPluginТипа: "Этоheuristics, убедитесь, что вы их удовлетворяете» (вот эвристики, убедитесь, что вы их выполнили) (разница между императивным и декларативным)

SplitChunksPluginЕсть также несколько замечательных свойств:

1. Он никогда не загружает нежелательные модули (пока вы не применяете по имениchunkсливаться)
2. в асинхронном режимеchunksтакже эффективен
3. Асинхронный по умолчаниюchunksсегментация шаблона
4. проще в использовании
5. Это не зависит отchunkкартина
6. В основном автоматизированная конфигурация

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

Примечание: вы можете пройтиoptimization.splitChunksнастроить. Эти примеры иллюстрируют некоторыеchunkконтент, по умолчанию он работает только для асинхронногоchunk, но используяoptimization.splitChunks.chunks:"all"настроить для всех типов файлов (синхронизация, асинхронностьchunk)

ПРИМЕЧАНИЕ. Мы предполагаем, что каждая внешняя библиотека, используемая здесь, больше, чем30kb, потому что оптимизация кода вступает в силу только за пределами этого размера.

Vendors

chunk-a: react, react-dom, some components
chunk-b: react, react-dom, some other components
chunk-c: angular, some components
chunk-d: angular, some other components

webpack автоматически создаст дваvendors chunks, результат следующий:

vendors~chunk-a~chunk-b: react, react-dom
vendors~chunk-c~chunk-d: angular
chunk-a to chunk-d: Only the components

Поставщики пересекаются

chunk-a: react, react-dom, some components
chunk-b: react, react-dom, lodash, some other components
chunk-c: react, react-dom, lodash, some components

webpack также создает дваvendors chunks, результат следующий:

vendors~chunk-a~chunk-b~chunk-c: react, react-dom
vendors~chunk-b~chunk-c:lodash
chunk-a to chunk-c: Only the components

общий модуль

chunk-a: vue, some components, some shared components
chunk-b: vue, some other components, some shared components
chunk-c: vue, some more components, some shared components

Предположим, что размер общего компонента больше, чем30kb,webpackсоздастvendors chunkс однимcommons chunk, результат следующий:

vendors~chunk-a~chunk-b~chunk-c: vue
commons~chunk-a~chunk-b~chunk-c: some shared components
chunk-a to chunk-c: Only the components

когда этиshared componentsменьше чем30kbчас,webpackнамеренно скопирует модуль вchunk-a chunk-b chunk-cв трех файлах. Они утверждают, что общее уменьшение размера нагрузки за счет разделения не так хорошо, как стоимость запроса на дополнительную нагрузку.

несколько общих модулей

chunk-a: react, react-dom, some components, some shared react components
chunk-b: react,react-dom, angular, some other components
chunk-c: react,react-dom, angular, some components, some shared react components, some shared angular components
chunk-d: angular, some other components, some shared angular components

webpack создаст дваvendors chunkи дваcommons chunk, результат следующий:

vendors~chunk-a~chunk-b~chunk-c: react, react-dom
vendors~chunk-b~chunk-c~chunk-d: angular
commons~chunk-a~chunk-c: some shared react components
commons~chunk-c~chunk-d: some shared angular components
chunk-a to chunk-d: Only the components

Примечание: из-заchunkимя включает в себя все оригинальныеchunkимя, поэтому рекомендуется не включать в долговременные кешированные производственные сборки[name], или поoptimization.splitChunks.name:falseОтключите генерацию имен, чтобы новые ссылки добавлялись при последующей разработке без изменения имени файла.

Если у вас есть какие-либо предложения по оптимизации этой статьи, вы можете отсканировать приведенный ниже QR-код для совместного обсуждения.В то же время я надеюсь, что вы будете уделять больше внимания и будете время от времени присылать оригинальные статьи.