Webpack извлекает общий код CommonsChunkPlugin

внешний интерфейс JavaScript Webpack
Webpack извлекает общий код CommonsChunkPlugin

задний план

Каковы последствия отказа от извлечения общедоступной части? 

1. Многократная загрузка ссылок на один и тот же ресурс лишает пользователя трафика и затрат на сервер;

2. Каждая страница должна загружать слишком много ресурсов, что приводит к медленной загрузке домашней страницы;

Каковы преимущества после экстракции? 

1. Одни и те же ресурсы упаковываются и загружаются только один раз, что снижает сетевой трафик и нагрузку на сервер;

2. Скорость загрузки страницы увеличена, а пользовательский опыт представлен;

конкретное использование

Думать

1. В соответствии с технологическим стеком, используемым в проекте, извлеките базовую библиотеку, используемую всеми страницами, для формирования `base.js`, который содержит все основные зависимости от среды, необходимые для работы технологического стека (при условии, что технологический стек остается неизменным, в основном постоянный кеш)

2. После удаления всего общего базового зависимого кода извлеките зависимый общий код со всех страниц, чтобы сформировать `common.js`;

3. Затем сгенерируйте отдельный файл для каждой страницы, тогда эти файлы больше не содержат код `base.js` и `common.js`, а содержат только независимый бизнес-код каждой страницы;


Определение и концепция

CommonsChunkPluginОн используется для извлечения общедоступного кода.В соответствии с конфигурацией извлекается и извлекается общедоступный код базовой библиотеки и бизнес-логики, чтобы уменьшить количество повторных ссылок на ресурсы;

CommonsChunkPluginДля файла с одной записью общедоступный код не может быть извлечен, только извлечениеwebpack runtimeкод окружения; извлеченный объект

Параметры конфигурации

name: ''

Извлеките имя файла общедоступного кода

names: string[]

namesИмя записи настраивается в записи, а не в пути. Если имя, настроенное здесь, соответствует фрагменту записи (имя выходного файла, заданное в записи или в динамическом выводе), он будет извлечен напрямую. Если это не так имеют такое же имя в записи, она будет создана.webpackКод среды работающей среды, а в качестве содержимого извлечения рабочая среда извлекается из записи извлечения;

chunks: string[]

chunksКонфигурация предназначена для извлечения источника общедоступного кода, то есть, какие записи должны извлекать общедоступный код; насколько я понимаю, если вы настраиваете здесь свободно, вы должны выбрать запись, которая будет извлечена в блоке записи (я не незнаю правильно ли это, т.к. если я прямо указываю путь к файлу, то эффекта не видно)

Если это значение не установлено, все входные фрагменты будут использоваться как извлеченные объекты.

filename: string

common chunkШаблон имени файла, если он не задан, исходное имя файла не будет изменено (и не будетname/namesИмя настроено в, но если настроено, оно будет использоваться первым)

minChunks: number | Infinity | function(module, count) => boolean

number Минимальное количество раз, которое модуль должен появиться во входных фрагментах, прежде чем его можно будет извлечь;

InfinityПо умолчанию извлекаются все фрагменты;

function(module, count) => booleanПользовательские правила извлечения

minChunksЗначение должно быть больше 2 и меньшеchunksДлина (т.е. длина элемента конфигурации Chunks или длина всех частей)

minSize: number

Минимальный размер всех публичных модулей, прежде чем они созданы

children: boolean

Если установленоtrue, будут выбраны все подмодули публичных чанков, вообще не устанавливайте это значение, ведь наша ценность в том, чтобы извлечь публичный код, а не хотеть извлечь все, но с этим тоже нужно разбираться для разных проектов, в конце концов , настройка этих вещей также очень свободна;

async：boolean|string

Я пока не понял, что это...

Конкретная конфигурация

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

1. Является ли проект приложением с одной или несколькими записями, определяет, подходит ли оно вам для использования.CommonsChunkPlugin  

2. Какой из подъездаchunkэкстракция, определяющаяnames,chunks,childrenНастройки элемента конфигурации

3. Гранулярность извлечения, определяющаяminChunks,minSizeНастройки элемента конфигурации

В основном в соответствии с вышеизложенным, а затем настроитьentryтак же какpluginНичего страшного, идея извлечения тоже упоминается в начале статьи, поэтому я не буду перечислять различные ситуации.

// 提取公共代码主要修改的范围如下，
// manifest 的提取是把webpack启动运行部分代码，把部分代码抽离出来，
// 那每次业务代码有修改时，并不会影响到这个文件的hash，那就可以持久化在浏览器，减少用户加载的流量
module.exports = {  
  entry: {    
    main: ['./src/index.js'],    
    vendor: ['react']  
  },  
  plugins: [    
    new webpack.optimize.CommonsChunkPlugin({      
      names:['vendor', 'manifest'],          
      children: false,     // 是否对所有源chunks的子模块都包含          
      minChunks: 2,        // 提取代码的粒度          
      // chunks: [],       // 需要提取公共代码的源chunks     
    }),  
  ]
}


Категории