Может кто-нибудь объяснить CommonsChunkPlugin Webpack

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

Итак, предположим, что у меня есть следующая конфигурация:

...
enrty : {
    entry1 : 'entry1.js', //which has 'jquery' as a dependency
    entry2 : 'entry2.js', //which has 'jquery as a dependency
    vendors : [
        'jquery',
        'some_jquery_plugin' //which has 'jquery' as a dependency
    ]
},
output: {
    path: PATHS.build,
    filename: '[name].bundle.js'
}
...

если я связываю без использования CommonsChunkPlugin

я получу 3 новых файла пакета:

  • entry1.bundle.js, который содержит полный код entry1.js и jquery и содержит свою собственную среду выполнения
  • entry2.bundle.js, который содержит полный код entry2.js и jquery и содержит свою собственную среду выполнения
  • vendors.bundle.js, который содержит полный код jquery и some_jquery_plugin и содержит свою собственную среду выполнения

это, очевидно, плохо, потому что я потенциально загружать jquery 3 раза на странице, поэтому мы этого не хотим.

если я связываю с помощью CommonsChunkPlugin

в зависимости от того, какие аргументы я пас CommonsChunkPlugin любое из следующих действий:

  • Пример 1 : если я пройду { name : 'commons' } я в конечном итоге со следующей пачки файлов:

    • entry1.bundle.js, который содержит полный код entry1.js, требование jquery и не содержит время выполнения
    • entry2.bundle.js, который содержит полный код entry2.js, требование jquery и не содержит время выполнения
    • vendors.bundle.js что содержит полный код some_jquery_plugin, требование jquery и не содержит время выполнения
    • commons.bundle.js, который содержит полный код jquery и содержит время выполнения

    таким образом, мы в конечном итоге с некоторыми меньшими пакетами в целом и время выполнения содержится в commons пакета. Довольно хорошо, но не идеально.

  • Пример 2 : если я пройду { name : 'vendors' } я закончу со следующим пакетом файлы:

    • entry1.bundle.js, который содержит полный код entry1.js, требование jquery и не содержит время выполнения
    • entry2.bundle.js, который содержит полный код entry2.js, требование jquery и не содержит время выполнения
    • vendors.bundle.js, который содержит полный код jquery и some_jquery_plugin и содержит время выполнения.

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

  • дело 3: если я пройду { names : ['vendors', 'manifest'] } я получу следующие файлы пакета:

    • entry1.bundle.js, который содержит полный код entry1.js, требование jquery и не содержит время выполнения
    • entry2.bundle.js, который содержит полный код entry2.js, требование jquery и не содержит время выполнения
    • vendors.bundle.js, который содержит полный код jquery и some_jquery_plugin и не содержит время выполнения
    • manifest.bundle.js который содержит требования для каждого другого пакета и содержит время выполнения

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

что я не понимаю/я не уверен, что понимаю

  • на корпус 2 почему мы в конечном итоге с vendors пакет, содержащий общий код (jquery) и все, что осталось от vendors запись (some_jquery_plugin)? Из моего понимания, что за CommonsChunkPlugin а вот что он собрал общий код (jquery), и так как мы заставили его вывести его на vendors bundle, это своего рода "слияние" общий код в vendors bundle (который теперь содержал только код от some_jquery_plugin). Пожалуйста, подтвердите или объясните.

  • на корпус 3 я не понимаю, что произошло, когда мы проезжали { names : ['vendors', 'manifest'] } плагину. Почему / как это было vendors связка сохранена в целости, содержащая оба jquery и some_jquery_plugin, когда jquery явно общая зависимость, и почему был сгенерирован manifest.bundle.js файл создан так, как он был создан (требуется все остальные пакеты и содержащие время выполнения)?

1 75
javascript webpack bundle webpack-plugin commonschunkplugin

1 ответ:

это как CommonsChunkPlugin строительство.

общий кусок "получает" модули, совместно используемые несколькими блоками ввода. Хороший пример сложной конфигурации можно найти в папке репозиторий Webpack.

The CommonsChunkPlugin запускается на этапе оптимизации Webpack, что означает, что он работает в памяти, непосредственно перед тем, как куски запечатываются и записываются на диск.

когда несколько общих блоков определены, они обрабатываются внутри порядок. В вашем случае 3, это как запустить плагин дважды. Но обратите внимание, что CommonsChunkPlugin может иметь более сложную конфигурацию (minSize, minChunks и т. д.), которая влияет на способ перемещения модулей.

Пример 1:

  1. есть 3 entry блоков (entry1,entry2 и vendors).
  2. настройки устанавливает commons кусок как обычным блоком.
  3. плагин обрабатывает commons общий кусок (так как кусок не существует, он создан):
    1. он собирает модули, которые используются более одного раза в других кусках: entry1,entry2 и vendors использовать jquery таким образом, модуль удаляется из этих кусков и добавляется в commons чанк.
    2. The commons chunk помечается как entry кусок в то время как entry1,entry2 и vendors куски не помечены как entry.
  4. наконец-то, так как commons chunk-это entry чит содержит время выполнения и jquery модуль.

Пример 2:

  1. есть 3 entry блоков (entry1,entry2 и vendors).
  2. настройки устанавливает vendors кусок как обычным блоком.
  3. плагин обрабатывает vendors общий кусок:
    1. он собирает модули, которые используются более одного раза в других кусках: entry1 и entry2 использовать jquery таким образом, модуль удаляется из эти куски (обратите внимание, что он не добавляется в vendors кусок, потому что vendors блок уже содержит его).
    2. The vendors chunk помечается как entry кусок в то время как entry1 и entry2 куски не помечены как entry.
  4. наконец-то, так как vendors chunk-это entry chunk, он содержит время выполнения и jquery/jquery_plugin модули.

дело 3:

  1. есть 3 entry блоков (entry1,entry2 и vendors).
  2. настройки устанавливает vendors кусок и manifest кусок как обычные куски.
  3. плагин создает manifest кусок, как он не существует.
  4. плагин обрабатывает vendors общий кусок:
    1. он собирает модули, которые используются более одного раза в других кусках: entry1 и entry2 использовать jquery таким образом, модуль удаляется из этих кусков (обратите внимание, что он не добавляется к vendors кусок, потому что vendors блок уже содержит его).
    2. The vendors chunk помечается как entry кусок в то время как entry1 и entry2 куски не помечены как entry.
  5. плагин обрабатывает manifest common chunk (поскольку chunk не существует, он создается):
    1. он собирает модули, которые используются более одного раза в других блоках: поскольку нет модулей, используемых более одного раза, нет модуля переехал.
    2. The manifest chunk помечается как entry кусок в то время как entry1,entry2 и vendors находятся непомеченные как entry.
  6. наконец-то, так как manifest chunk-это entry chunk он содержит время выполнения.

надеюсь, что это помогает.

98