【前端資訊】Webpack 4 將移除 CommonsChunkPlugin

本文轉自 FEPulse 公眾號（微信搜索 FEPulse，每日精選一條國內外最新前端資訊，為你把握前端脈搏）。

近日，webpack 團隊發推表示，webpack 4 將移除 CommonsChunkPlugin, 取而代之的是兩個新的配置項 optimization.splitChunks 和 optimization.runtimeChunk。

CommonsChunkPlugin

在理解 CommonsChunkPlugin 之前，我們需要熟悉 webpack 中 chunk 的概念，webpack 將多個模塊打包之後的代碼集合稱為 chunk。為了將一些很少變化的常用庫（react、redux、lodash）與業務代碼分開，或者是一些不同入口共同使用的公共模塊，開發者常常需要將它們單獨打包，這些都可以通過配置 CommonsChunkPlugin 來實現。下面是一個 CommonsChunkPlugin 的簡單示例：

簡單來說，CommonsChunkPlugin 的作用主要體現在代碼分割和性能優化上，主要有如下幾個方面：

• 提取常用庫代碼
• 提取公有代碼
• 提取 webpack 的 runtime (運行時) 代碼

更新

webpack 4 準備通過 optimization.splitChunks 和 optimization.runtimeChunk 屬性來簡化代碼分割的配置

optimization.splitChunks

通過設置 optimization.splitChunks.chunks: "all" 來啟動默認的代碼分割配置項。

當滿足如下條件時，webpack 會自動打包 chunks:

• 當前模塊是公共模塊（多處引用）或者模塊來自 node_modules
• 當前模塊大小大於 30kb
• 如果此模塊是按需載入，並行請求的最大數量小於等於 5
• 如果此模塊在初始頁面載入，並行請求的最大數量小於等於 3

當然，開發者也可以通過修改配置來更換自動打包的條件。

optimization.runtimeChunk

通過設置 optimization.runtimeChunk: true 來為每一個入口默認添加一個只包含 runtime 的 chunk。

最後，再次邀請大家關注我們的公眾號 FEPulse，第一時間獲取我們精心整理的最新的前端資訊。

推薦閱讀：