[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