[譯]Webpack 4 — 神祕的SplitChunksc插件

原文連接：Webpack 4 — Mysterious SplitChunks Plugin

官方發佈了 webpack 4，捨棄了以前的 commonChunkPlugin，增長了 SplitChunksPlugin, 對於這個插件，它的 option 選項有‘initial’、'async'、'all'三個值。我想大多數剛學習 webpack 4 的同窗都不能很好的理解這幾個值的區別，到底每一個選項值意味着什麼呢，這篇文章爲咱們詳細解釋了這幾個值的區別。

這是個人一個粗略嘗試，經過一個常見的例子來理解和幫助你使用 SplitChunksPlugin 選項。

做爲早期的愛好者，我試圖理解代碼分割 (Code-Spliting) 背後的魔法。文檔說 splitChucnks 接受'initial', 'async', 'all'。我有點困惑，更加提升了個人好奇心。

我深刻研究了文檔的 Github 歷史記錄和 WebpackOptions 概要，並發現，

「There are 3 values possible 」initial」, 」async」 and 」all」. When configured the optimization only selects initial chunks, on-demand chunks or all chunks.」 — Github History

「Select chunks for determining shared modules (defaults to 「async」, 「initial」 and 「all」 requires adding these chunks to the HTML) 」

— WebpackOptions Schema
複製代碼

這裏的想法是有 a.js 和 b.js 兩個入口文件，而後引用相同的 node_modules。 其中的一些 module 會被動態引入，用來檢驗代碼分割(Code-Spliting)的行爲。

咱們使用 Webpack Bundle Analyzer Plugin 來幫助咱們理解咱們的 node_modules 是如何被分割的。

a.js:

只有 lodash 是動態引入的

b.js:

我選這樣的配置的主要緣由是爲了理解當存在公共庫時，Webpack 配置的表現是如何的

1. 在一個入口文件動態引入，另外一個則不 - React
2. 在兩個入口文件都動態引入 - lodash
3. 在兩個入口文件中都不動態引入 - jquery

咱們將保持這些文件不變，並經過 chunks 的值來更改 webpack 的配置。

1. chunks : 「async」 — Optimization over async module

chunks: 'async' 告訴 webpack

」hey， webpack！我只關心動態導入的模塊的優化。你能夠保留非動態模塊「

如今，讓咱們一步一步看看發生了什麼

• webpack 會從 b.js 提取出 react，並移動到一個新文件，但保持 a.js 中的 react 不動。這個優化只會做用到動態模塊，import('react') 聲明會產生獨立的文件，import 'react' 則不會
• webpack 從 a.js 中提取 lodash，並移動到一個新文件，該文件也被 b.js 引用了
• 這裏不會對 jquery 進行優化，儘管 a.js 和 b.js 都引用了

2. chunks : 「initial」 — Optimization over Sync Module

chunks: 'initial' 告訴 webpack

」hey， webpack！我不關心動態引入的模塊，你能夠爲每個模塊分別建立文件。可是，我但願將全部非動態引入的模塊放在一個 bundle 中，儘管它們還須要引入其餘的非動態引入的木塊，我準備與其餘文件共享和分塊個人非動態導入模塊「

如今，讓咱們一步一步看看發生了什麼

• a.js 中的 react 會被移動到node_vendors~a.bundle.js, b.js 中的 react 會被移動到0.bundle.js
• a.js 和 b.js 中的 lodash 會被移動到1.bundle.js。爲何？這是一個動態引入的模塊
• jquery 是一個非動態導入的公共模塊，會移動到 node_vendors~a~b.bundle.js，被 a.js 和 b.js 共享

3. chunks : ‘all’ — Optimization over Async and Sync Module

chunks: 'all' 告訴 webpack

」hey， webpack！我不關心這是一個動態仍是非動態引入的模塊。都對它們進行優化。 但要確保......你足夠聰明這樣作「

如今，讓咱們一步一步看看發生了什麼

• react 在 a.js 中是非動態引入的模塊，在 b.js 中是動態引入的。所以，它轉到單個文件 0.bundle.js，它將由二者引用。
• lodash 在兩個文件中都是動態引入的，因此它顯然獲得一個單獨的文件1.bundle.js
• jquery 是非動態導入的，所以它轉到公共共享模塊 node_vendors~a~b.bundle.js，並將由二者引用。

討論

第一次翻譯，有不少不到位的地方，歡迎指正。地址 github.com/liuhanqu/bl…