webpack4之splitChunks和runtimeChunk

原文鏈接：https://blog.csdn.net/yangjidaimin/article/details/83718768

爲什麼要用splitChunks

webpack4之前使用CommonsChunkPlugin提取公共代碼，但是CommonsChunkPlugin存在以下三個問題：
1:產出的chunk在引入的時候，會包含重複的代碼；
2: 無法優化異步chunk；
3:高優的chunk產出需要的minchunks配置比較複雜。
爲了解決這些問題，webpack4中用splitchunks替代了CommonsChunkPlugin。

splitChunks參數詳解

splitChunks在production模式下自動開啓。有一些默認配置，通過配置參數詳細說明：

splitChunks: {
    chunks: "async”,//默認作用於異步chunk，值爲all/initial/async/function(chunk),值爲function時第一個參數爲遍歷所有入口chunk時的chunk模塊，chunk._modules爲gaichunk所有依賴的模塊，通過chunk的名字和所有依賴模塊的resource可以自由配置,會抽取所有滿足條件chunk的公有模塊，以及模塊的所有依賴模塊，包括css
    minSize: 30000,  //默認值是30kb
    minChunks: 1,  //被多少模塊共享
    maxAsyncRequests: 5,  //所有異步請求不得超過5個
    maxInitialRequests: 3,  //初始話並行請求不得超過3個
    name: true,  //打包後的名稱，默認是chunk的名字通過分隔符（默認是～）分隔開，如vendor~
    cacheGroups: { //設置緩存組用來抽取滿足不同規則的chunk,下面以生成common爲例
       common: {
         name: 'common',  //抽取的chunk的名字
         chunks(chunk) { //同外層的參數配置，覆蓋外層的chunks，以chunk爲維度進行抽取
         },
         test(module, chunks) {  //可以爲字符串，正則表達式，函數，以module爲維度進行抽取，只要是滿足條件的module都會被抽取到該common的chunk中，爲函數時第一個參數是遍歷到的每一個模塊，第二個參數是每一個引用到該模塊的chunks數組。自己嘗試過程中發現不能提取出css，待進一步驗證。
         },
        priority: 10,  //優先級，一個chunk很可能滿足多個緩存組，會被抽取到優先級高的緩存組中
       minChunks: 2,  //最少被幾個chunk引用
       reuseExistingChunk: true，//	如果該chunk中引用了已經被抽取的chunk，直接引用該chunk，不會重複打包代碼
       enforce: true  // 如果cacheGroup中沒有設置minSize，則據此判斷是否使用上層的minSize，true：則使用0，false：使用上層minSize
       }
    }
}

runtimeChunk用法

它的作用是將包含chunks 映射關係的 list單獨從 app.js裏提取出來，因爲每一個 chunk 的 id 基本都是基於內容 hash 出來的，所以你每次改動都會影響它，如果不將它提取出來的話，等於app.js每次都會改變。緩存就失效了。

友情提示：

可以用–profile --json >stats.json命令行參數來生成記錄wepack編譯打包過程json文件，把該json文件上傳到http://webpack.github.io/analyse/可以進行資源包大小和編譯構建速度的分析

原文鏈接：https://blog.csdn.net/yangjidaimin/article/details/83718768