webpack 优化思路

优化方向

• webpack-bundle-analyzer：文件大小分析
• speed-measure-webpack-plugin 打包耗时分析

1. 使用高版本的 webpack 和 nodejs
2. 按需引入
3. 搜小查找范围（loader）
   • exclude/include (确定 loader 规则范围)
   • resolve.modules 指明第三方模块的绝对路径 (减少不必要的查找)
   • resolve.mainFields 只采用 main 字段作为入口文件描述字段 (减少搜索步骤，需要考虑到所有运行时依赖的第三方模块的入口文件描述字段)
   • resolve.extensions 尽可能减少后缀尝试的可能性
   • noParse 对完全不需要解析的库进行忽略 (不去解析但仍会打包到 bundle 中，注意被忽略掉的文件里不应该包含 import、require、define 等模块化语句)
   • IgnorePlugin (完全排除模块)
   • 合理使用alias
4. 缓存
5. 多进程/多实例构建：HappyPack(不维护了)、thread-loader
6. 代码压缩
7. 图片压缩或外链（压缩）
8. 样式分离 （mini-css-extract-plugin）
9. DLL 动态链接库
10. CommonsChunkPlugin => optimization.splitChunks 和 optimization.runtimeChunk
11. CommonsChunkPlugin
    1. 公用包的抽离【react、lodash、moment、vue、vue-loaderK】
12. optimization.splitChunks.chunks: “all”
13. 当前模块是公共模块（多处引用）或者模块来自 node_modules
14. 当前模块大小大于 30kb 如果此模块是按需加载，并行请求的最大数量小于等于 5
15. 如果此模块在初始页面加载，并行请求的最大数量小于等于 3