webpack 性能优化之定位问题

第 9 阶段：搞懂、搞透前端构建第 11 天

昨天分享了我学习 webpack 所用到的资源 这些资料助你搞透 Webpack。

当你的前端项目比较大的时候，往往会出现性能问题，编译起来慢如蜗牛行走，这时候该进行性能优化。

性能优化并不是很高大尚、很难的知识点，很多人往往用它来吹捧自己的技术有多牛，其实对于一般的性能优化，大多数人都可以进行优化。对于那些极度难优化的问题需要「深刻」理解 webpack 的原理。

性能优化的第一步是「定位问题」，weback 在编译过程中，在哪个阶段耗时比较长？哪个文件比较大？

使用 webpack 进行打包时，会产生一大堆「状态信息」，也就是我们在打包时所看到的日志信息：

除此之外，可以在编译时把这些状态信息写入到一个文件中，在 npm script 中添加一个参数 --json：

 "build:json": "webpack --config webpack.config.js 
 --env production --json > stats.json"

当执行 npm run build:json 时，在根目录下会生成一个 stats.json 文件，内容如下：

除了指定参数 json，也可以指定其它参数，比如：profile（每个文件具体耗时时间）。

这个对于分析耗时非常重要，可根据具体的耗时采用特定的优化策略。

还可以指定 prgoress 参数。

有了这些「编译状态信息」，可以通过工具来分析状态，使得整个状态可视化。我们使用一下 BundleAnalyzerPlugin 这个工具，它仅仅是一个插件。如果你没用过这个插件，不妨在你的项目中使用一下这个插件。效果如下：

插件地址：

https://github.com/webpack-contrib/webpack-bundle-analyzer

在你的项目中先安装 webpack-bundle-analyzer 这个工具，导入这个插件：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

在 webpack 配置文件中添加这个插件：

plugins: [
    new BundleAnalyzerPlugin()
]

执行 npm run build 进行打包，这时会自动打开一个页面

BundleAnalyzerPlugin 这个工具还有很多值得你去探索的。

大家加油！

---

推荐阅读：

这些资料助你搞透 Webpack

https://survivejs.com/webpack/optimizing/build-analysis/