[譯]Webpack 4 — 神祕的SplitChunksc外掛

流汗去發表於2018-07-11

原文連結：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 配置的表現是如何的

在一個入口檔案動態引入，另一個則不 - React
在兩個入口檔案都動態引入 - lodash
在兩個入口檔案中都不動態引入 - 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 共享