[toc] ## 參考 >https://segmentfault.com/q/1010000015017897 >https://juejin.im/post/5af1677c6fb9a07ab508dabb >https://www.jianshu.com/p/3066d96aec8b >https://github.com/webpack/webpack/tree/master/examples/common-chunk-and-vendor-chunk ## 為什么要  ## 異步代碼拆分 ### import()進行代碼拆分    如果不給 **chunkName** 生成的是`1.chunk.js`，`2.chunk.js`這樣的  ### 使用require.ensure進行代碼拆分   - 第一個參數 `[]` 里可以省略 #### require.include() 如果拆分出去的代碼有公共的代碼片段需要共享 可以在它們共同的父模塊處使用**require.include**這個公共的模塊，這樣拆分出去的模塊就不會各自都包含這個公共模塊（已經在父級里了） ## splitChunks 我們可以在 **splitChunks** 對象中進行全局拆分配置 ，也可以在 **cacheGroups** 中進行訂制 **cacheGroups** 對象里的 **key** 就是拆分出去的代碼的文件名 `chunks:initial` 意思是首屏需要加載的 chunks支持的值有："initial", "async"（默認） 或 "all" - initial 入口chunk，對于異步導入的文件不處理 - async 異步chunk，只對異步導入的文件處理（個人理解） - all 皆可    ### 與production模式 production 中 會自動添加 splitchunks 1. 帶一個chunk是被共同依賴，或則是從node_modules中來的就會被切分 2. 某個chunk大于30kb就會被切分 3. 在按需加載的時候，最大的并行下載 chunk 數量應該要小于等于5 4. 在首屏加載的時候，最小的并行下載 chunk 的數量應該要小于等于3 ### 其它注意事項 - cacheGroups 會繼承和覆蓋splitChunks的配置項，但是test、priorty和reuseExistingChunk只能用于配置緩存組。。 - cacheGroups 里的每一項最好都要加上chunks參數，不然可能打包不出來你想要的東西。 - minSize 默認是30KB（注意這個體積是壓縮之前的）在小于30kb的情況下一定要設置一個值，否則也可能打包不出來你想要的東西，而且這東西要加在cacheGroups里面。 - priority 在某些情況下，還是挺有用的，可以設置打包chunks的優先級。 ## webpack 5