一、前言 　　之前一直也沒有研究過webpack4是基於怎樣的規則去拆分模塊的，現在正好有時間打算好好了解一下，看了官方文檔也陸陸續續的看了看網上別人寫的文章，感覺大部分都是將官方文檔翻譯了一遍，很多問題都沒有解釋清楚，無奈只好自己寫demo去通過實際編譯結果來理解，經過一天多的不斷調試和百度 ...

　　splitChunks除了之前文章提到的規則外，還有一些要點或是叫疑惑因為沒有找到官方文檔的明確說明，所以是通過我自己測試總結出來的，只代表我自己的測試結果，不一定正確。 splitChunks.cacheGroup必須同時滿足各個條件才能生效，這個之前我理解錯誤，我以為 ...

　　maxInitialRequests是splitChunks里面比較難以理解的點之一，它表示允許入口並行加載的最大請求數，之所以有這個配置也是為了對拆分數量進行限制，不至於拆分出太多模塊導致請求數量過多而得不償失。 　　這里需要注意幾點： 入口文件本身算一個請求 如果入口 ...

　　maxAsyncRequests和maxInitialRequests有相似之處，它倆都是用來限制拆分數量的，maxInitialRequests是用來限制入口的拆分數量而maxAsyncRequests是用來限制異步模塊內部的並行最大請求數的，說白了你可以理解為是每個import()它里面 ...

　cacheGroups其實是splitChunks里面最核心的配置，一開始我還認為cacheGroups是可有可無的，這是完全錯誤的，splitChunks就是根據cacheGroups去拆分模塊的，包括之前說的chunks屬性和之后要介紹的種種屬性其實都是對緩存組進行配置 ...

chunks 參數值 含義 all 把動態和非動態模塊同時進行優化打包；所有模塊都扔到 vendors.bundle.js 里面。 initial 把非動態模塊打包進 vendor，動態模塊 ...

https://zhuanlan.zhihu.com/p/152097785 https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks ...

https://segmentfault.com/q/1010000006591131 通過修改 HtmlWebpackPlugin 源碼實現了 修改后的配置： 插件修 ...