webpack性能优化篇（建议收藏）

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/196944.html

1. 为什么要做 webpack 配置的优化？
2. 如何作出具体的优化？
• 初级分析：使用 webpack 内置的 stats
• 速度分析：使用 speed-measure-webpack-plugin
• 分析体积：webpack-bundle-analyzer
• 多进程/多实例构建：资源并行解析可选方案
• 使用 HappyPack 解析资源
• 并行压缩 terser-webpack-plugin
• 分包：设置 Externals
• 进一步分包：预编译资源模块 DLLPlugin
• 开启缓存
• 缩小构建目标
• 减少文件搜索范围
• tree shaking
• 图片压缩
• 压缩前：
• 压缩后：
• 构建体积优化：动态 Polyfill
• iphone5
• iphone6/7/8
• iphoneX
• 项目中使用
3. 总结

本文将和大家一起分享一下如何从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>

总结

1. 虽然，webpack5已经在 2020 年的 10 月 10 号完成了发布，但是目前基于项目架构在生产环境下的稳定性、可维护性来讲，我们这里依然采用的是 webpack4 来分析构建的优化策略。
2. 当然，webpack5在项目打包优化上会更具有优势，如持久化的缓存、对node中polyfill的移除、更优的tree-shaking、以及令人兴奋的Module Federation，这些新特性还是很值得大家去升级探索的。感兴趣的小伙伴可以看我另一篇文章中给大家分享的webpack5 项目升级实战。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/