webpack Code Splitting詳解

webpack Code Splitting詳解

webpack4 廢除了CommonsChunkPlugin 引入了 optimization.splitChunks

若是在webpack4中使用了weppack3的CommonsChunkPlugin 會出現如下報錯：

（運行配置文件 webpack3.config.js)Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks

代碼分割（Code Splitting）

將一個文件分割成多個文件：由於瀏覽器會緩存你的代碼，每當你對某一文件作點改變，訪問你站點的人們就要從新下載它，包括依賴。若是你將（這些依賴）分離成單獨的文件，訪問者就無需屢次重複下載它們了。

使用webpack生成一個或多個包含你源代碼最終版本的「打包好的文件」（bundles），（概念上咱們看成）它們由（一個一個的）chunks組成。

​ 做用：

​ 提取公用代碼，減小代碼的冗餘，

​ 提升用戶的加載速度

​ 單頁面減小下載，多頁面可使用緩存

配置項

module.exports = {
 	//...
 	optimization: {
  		splitChunks: {
   			chunks: 'async', 
   			minSize: 30000,
   			minChunks: 1,
   			maxAsyncRequests: 5,
   			maxInitialRequests: 3,
   			automaticNameDelimiter: '~', 
   			name: true,
   			cacheGroups: {}
  		}
 	}
}
複製代碼

• chunks: 表示哪些代碼須要優化，有三個可選值：initial(初始塊)、async(按需加載塊)、all(所有塊)，默認爲async
• minSize: 表示在壓縮前的最小模塊大小，默認爲30000
• minChunks: 表示被引用次數，默認爲1
• ````maxAsyncRequests```: 按需加載時候最大的並行請求數，默認爲5
• maxInitialRequests: 一個入口最大的並行請求數，默認爲3
• automaticNameDelimiter: 命名鏈接符
• name: 拆分出來塊的名字，默認由塊名和hash值自動生成
• cacheGroups: 緩存組。緩存組的屬性除上面全部屬性外，還有test, priority, reuseExistingChunk
  • test: 用於控制哪些模塊被這個緩存組匹配到
  • priority: 緩存組打包的前後優先級
  • reuseExistingChunk: 若是當前代碼塊包含的模塊已經有了，就不在產生一個新的代碼塊

注意：initial 模式下會把異步和非異步模塊分開打包。而 all 會把異步和非異步同時進行打包。也就是說moduleA在indexA中異步引入，indexB中同步引入， initial 下moduleA會出如今兩個打包塊中，而 all 只會出現一個。

官方文檔：webpack.js.org/plugins/spl…