分包
分包（splitChunks）
作用
- 提高首屏加载速度
- 更好地利用浏览器缓存
默认 chunk
- init chunk
- Async chunk（import ('./')）
- runtime chunk
最佳实践
- 第三方包拆分，比如 react/vue/redux/echarts/lodash/antd...
- 针对 node_modules 资源：
- 可以将 node_modules 模块打包成单独文件(通过 cacheGroups 实现)，防止业务代码的变更影响 NPM 包缓存，同时建议通过 maxSize 设定阈值，防止 vendor 包体过大；
- 更激进的，如果生产环境已经部署 HTTP2/3 一类高性能网络协议，甚至可以考虑将每一个 NPM 包都打包成单独文件
- 针对业务代码：
- 设置 common 分组，通过 minChunks 配置项将使用率较高的资源合并为 Common 资源；
- 首屏用不上的代码，尽量以异步方式引入；
- 设置 optimization.runtimeChunk 为 true，将运行时代码拆分为独立资源
参考