- 为什么要做 webpack 配置的优化？
- 如何作出具体的优化？
- 初级分析：使用 webpack 内置的 stats
- 速度分析：使用 speed-measure-webpack-plugin
- 分析体积：webpack-bundle-analyzer
- 多进程/多实例构建：资源并行解析可选方案
- 使用 HappyPack 解析资源
- 并行压缩 terser-webpack-plugin
- 分包：设置 Externals
- 进一步分包：预编译资源模块 DLLPlugin
- 开启缓存
- 缩小构建目标
- 减少文件搜索范围
- tree shaking
- 图片压缩
- 构建体积优化：动态 Polyfill
- 总结
本文将和大家一起分享一下如何从webpack上来做出构建的优化。
为什么要做 webpack 配置的优化？
最近刚做了一个保险业务的大型项目中，项目页面达到800+，随之带来的挑战就是项目中打包出来的 js 体积越来越大，构建速度越来越缓慢，无疑，从webpack构建配置上就需要作出一系列的优化了。以下配置的优化，均在真实项目中有过实战，希望对大家有帮助。
如何作出具体的优化？
声明：本文基于webpack版本号如下：
"webpack": "^4.42.0", "webpack-cli": "^3.3.11"
在作出webpack配置优化之前，首先我们需要借助一些webpack 插件来分析我们当前的构建日志，以及构建速度、构建体积等。
初级分析：使用 webpack 内置的 stats
通过设置stats来统计我们的构建的信息。
我们在package.json中添加如下配置：
"scripts": {
"build:stats": "webpack --config build/webpack.config.prod.js --json > stats.json"
}
运行npm run build:stats后，再执行npm run prod后，在我们项目的根目录下会生成一个stats.json文件，这个文件会记录我们项目构建的各种信息，同时也可以stats后看到控制台打印出对应的构建信息。
我们对比可以发现，不同的手机机型，我们去访问 polyfill.io/v3/polyfill.min.js 的时候，资源的体积大小是不一样的。
项目中使用
<script src='https://polyfill.io/v3/polyfill.min.js'></script>
总结
- 虽然，
webpack5已经在 2020 年的 10 月 10 号完成了发布，但是目前基于项目架构在生产环境下的稳定性、可维护性来讲，我们这里依然采用的是 webpack4 来分析构建的优化策略。 - 当然，
webpack5在项目打包优化上会更具有优势，如持久化的缓存、对node中polyfill的移除、更优的tree-shaking、以及令人兴奋的Module Federation，这些新特性还是很值得大家去升级探索的。感兴趣的小伙伴可以看我另一篇文章中给大家分享的webpack5 项目升级实战。