webpack 二三事:如何讓 CommonsChunkPlugin() 發揮最大效益

Chia-Wei Li
Jan 1, 2018 · 8 min read

我們發現了什麼?

最常見的是程式碼重覆的狀況:同樣的函式庫、元件或程式碼重覆出現在多個同步或非同步載入的 bundles 中!

狀況一:多個 vendor bundles 存在重覆的程式碼

感謝 Swizec 讓我分享這個經典的例子
靠近「FoamTree」圖示的部份是 application 本身的程式碼,而左半部以「_vendor.js」結尾的部份則來自 node_modules
Object.keys(activeApps)
.map(app => new webpack.optimize.CommonsChunkPlugin({
name: `${app}_vendor`,
chunks: [app],
minChunks: isVendor
}))

可以改善的區域

下面這些我圈起來的部份可以再做些改進。

「Meta」快取

從上面的圖中我們可以看出像是 momentjs、lodash 和 jquery 這類的大型函式庫被 6 個以上的 vendor bundles 使用。將所有 vendor 放到獨立的 bundle 中是個好策略,而我們也應該將同樣的方法套用在所有 vendor bundles 上

new webpack.optimize.CommonsChunkPlugin({
children: true,
minChunks: 6
})
看起來這個獨立檔案的名稱是「manifest.js」?

狀況二:非同步載入的 chunks 存在重覆的 vendor 程式碼

這是個讓人印象深刻的 code splitting 成果,看看那漂亮的顏色 💓
非同步載入的 chunks 檔案名稱為「[數字].[數字].js」

建立非同步載入的 Commons Chunk

這個解決方法和狀況一的很類似,不過我們要把設定中的 async 屬性設定為 true

new webpack.optimize.CommonsChunkPlugin({
async: true,
children: true,
filename: "commonlazy.js"
});
這裡還能把 minChunks 的數值調高來產生更小的 commonlazy.js

更多控制手段:minChunks 函數

new webpack.optimize.CommonsChunkPlugin({
filename: "lodash-moment-shared-bundle.js",
minChunks: function(module, count) {
return module.resource && /lodash|moment/.test(module.resource) && count >= 3
}
})

更多更多的控制手段

function lodashMomentModuleFilter(module, count) {
return module.resource && /lodash|moment/.test(module.resource) && count >= 2;
}
function immutableReactModuleFilter(module, count) {
return module.resource && /immutable|react/.test(module.resource) && count >=4
}
new webpack.optimize.CommonsChunkPlugin({
filename: "lodash-moment-shared-bundle.js",
minChunks: lodashMomentModuleFilter
})
new webpack.optimize.CommonsChunkPlugin({
filename: "immutable-react-shared-bundle.js",
minChunks: immutableReactModuleFilter
})

沒有所謂的萬靈丹!

CommonsChunkPlugin() 也許很強大,但要記得這裡的範例都是為了對應的 application 量身打造。在你將這些程式碼片段複製貼上前,記得聽聽 Sam SacconePaul Irish 的建議並先進行 MPDIA 確保你使用了正確的方法。

套用解法前確實弄懂你要做的事!

我要從哪裡找到更多範例?

這邊只是 CommonsChunkPlugin() 使用和設定的一些樣本,想要了解更多的話可以參考我們在 GitHub 上 webpack/webpack 核心 repo 的 /example 目錄!如果你有更多好點子的話,請儘管發 Pull Request 出來吧!

Frochu

Frochu — Frontend Ochu ,程式碼的黑手,親手實作的前端知識推動者

Thanks to Amdis Liu.

Chia-Wei Li

Written by

Full stack and mobile developer

Frochu

Frochu

Frochu — Frontend Ochu ,程式碼的黑手,親手實作的前端知識推動者