Подробное объяснение webpack.optimize.CommonsChunkPlugin

Webpack

#четкая концепция

  • Каждый входной файл записи называется чанк (entry chunk)
  • Асинхронная загрузка каждого входного файла также называется чанк (дочерний чанк).
  • Извлеченный с помощью commonChunkPlugin также называется чанком (общим чанком).

#сцены для использования

  1. Когда файл с несколькими записями необходимо извлечь общую часть.
  2. Файл с одной записью, но поскольку маршрутизация асинхронно загружается в несколько дочерних фрагментов, он извлекает части, общие для каждого дочернего элемента.
  3. Сторонние зависимости извлекаются из всех зависимостей в node_modules в отдельные части.
  4. Смешанное использование, необходимо извлекать как сторонние зависимости, так и публичные части.

#реализация часть Структура проектаimage.png

 // a.js
 import { common1 } from './common'
 import $ from 'jquery';
 console.log(common1, 'a')

  //b.js
  import { common1 } from './common'
  import $ from 'jquery';
  console.log(common1, 'b')

  //common.js
  export const common1 = 'common1'
  export const common2 = 'common2'

Результаты упаковки без использования плагинов следующие:image.png

случай 1 извлекает запись с несколькими входами в common.js

  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: "common",
      filename: "common.js"
    })
  ]

Результат выполнения следующий:image.png

case 2 Извлечь common.js из дочернего фрагмента

// 单入口文件 main.js
const component1 = function(resolve) {
  return require(['./a'], resolve)
}
const component2 = function(resolve) {
  return require(['./b'], resolve)
}
console.log(component1, component2, $, 'a')

Результат выполнения без commonChunk следующий:image.png

 //使用commonChunk 配置如下
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      children: true,
      async: 'children-async',
      name: ['main']
    })
  ]

// Результат выполнения следующийimage.png

case 3 node_modules все сторонние зависимости извлекаются как vendor.js

//webpack 配置
...
  entry : {
    main: './src/main.js',
    vendor: ['jquery']
  }
...
...
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',  // 这里是把入口文件所有公共组件都合并到 vendor模块当中
      filename: '[name].js'
    })
...

Результат выполнения следующий:image.png

Смешанное использование случая 4, случая 2 и случая 3

....
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name:  'vendor',
      filename: '[name].js'
    }),
    new webpack.optimize.CommonsChunkPlugin({
      children: true,
      async: 'children-async',
      name: ['main']
    })
  ]
....

Результат выполнения следующий:image.png

скачать исходный код github

#Примечания

  • имя: Если и имя записи, и CommonsChunkPlugin имеют поставщика, извлеченная общедоступная часть объединяется с файлом записи поставщика. Если в записи нет поставщика, файл записи извлекается и помещается в поставщика.
  • minChunks: это может быть число, функция или бесконечность. Число: сколько общих фрагментов ссылается на модуль, прежде чем он будет извлечен как общий фрагмент. Функция: принимает два параметра (модуль, количество) и возвращает логическое значение.Вы можете выполнить указанную вами логику в функции, чтобы решить, следует ли извлечь модуль и стать частью общего доступа.image.pngБесконечность: вступает в силу только в том случае, если входные фрагменты> = 3, используемые для разделения пользовательских общедоступных модулей в сторонних библиотеках.
  • Common.js после commonChunk может продолжать извлекаться до тех пор, пока может быть достигнута конфигурация name: в новом CommonsChunkPlugin.
  • Вышеупомянутый метод используется только с webpack 4 и ниже.
Категории