Fast load times系列翻译——将性能预算合并到构建过程中

Fast load times系列翻译——将性能预算合并到构建过程中

在你定义了性能预算之后，就应该开始在程序中实施并追踪它了。有许多工具可以帮助你设置性能预算，并且在程序超出预算时发出警告。我们现在要做的就是去了解如何选择最适合你的需求的产品。🕵️‍♀️

使用 Lighthouse 性能预算

Lighthouse是一个查看性能的辅助工具，它可以在几个关键领域测试网站的性能、可访问性、最佳实践以及网站作为渐进式网页应用（PWA）的表现如何。

Lighthouse 的命令行版本(v5+)支持基于

• 资源大小
• 资源数量

的性能预算。

您可以为下列任何资源类型设置预算。

• document（文档）
• font（字体）
• image（图片）
• media（媒体）
• other（其他）
• script（脚本）
• stylesheet（样式）
• third-party（第三方）
• total（整体）

预算显示在一个JSON文件中，在定义了预算之后，新生成的“Over Budget”列会告诉你是否超出了预算。

webpack 性能提示

Webpack 是一个功能强大的构建工具，他能帮助你快速地将代码交付给客户。当然，它还支持基于资源大小的性能预算的设置。

到 webpack.config.js 中打开性能提示，当包的大小超出限制时，就会得到命令行的警告或错误提示。在开发过程中，这是一个监控资源的好方法。

在构建流程之后，webpack 会输出带颜色的资源列表，超出部分会用黄色标出。

资源和入口文件默认限制都是 250KB，你可以在配置文件中设置你自己的预算。

预算时与未压缩时的资源进行比较！执行 JavaScript 的时间与未压缩的 JavaScript 有关，尤其是在移动设备上，大文件执行起来会花费很长时间。

但是压缩的资源会影响传输时间，这在慢速网络中也非常重要。

Bundlesize

Bundlesize是一个简单的 npm 包，它会根据你预设的阈值测试资源大小。它可以在本地运行，也可以集成到 CI 里。

Bundlesize CLI

通过指定阈值和要测试的文件来运行bundlesize CLI。

bundlesize -f "dist/bundle.js" -s 170kB

Bundlesize会输出一行带颜色的测试结果。

Bundlesize 持续集成

使用 bundlesize 的最好方式就是在 CI 中集成它从而自动对 pull request (pr) 进行大小限制。如果 bundlesize 测试未通过，则该合并请求会失效。它适用于Travis CI, CircleCI, Wercker和 Drone。

你可能已经有了一个高速的应用，但是这可能随着新代码的添加而改变。使用 bundlesize 可以有效帮助你避免因为合并代码而导致性能下降。Bootstrap, Tinder, Trivago和其他很多公司都在使用它开保持性能预算。

bundlesize 可以为每个文件分别设置阈值。如果要在应用程序中拆分一个包，这一点将会特别有用。

默认情况下，它测试压缩后的资源大小。您可以通过设置选项切换到 brotli压缩 或完全关闭它。

Lighthouse Bot

用Lighthouse Bot 结合 Travis CI 来推行基于 Lighthouse 的五个指标。例如：将你的 Lighthouse 性能得分的预算设为 100。关注一个数字比关注整个性能预算要更清晰明了并且 lighthouse 的得分帮你考虑了很多因素。

在你把站点部署到服务器后，lighthouse bot 会进行审查。在.travis.yml中使用--perf，--a11y,--bp, --seo 或 --pwa来指定 lighthouse 审查特定的指标。目标是保持在绿色区域，得分至少90分。

after_success:
  - ./deploy.sh # Deploy the PR changes to staging server
  - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test

如果 GitHub上的pull request 得分低于你设定的阈值，Lighthouse Bot 可以阻止 pull request 被合并。 ⛔

Lighthouse Bot 会在你提交 pr 来更新代码时评价你的代码。这是一个很好的特性，它能够激励我们在修改代码时关注性能问题。

如果你发现你的 pr 因为一个糟糕的评分被退回了，请先在代码中运行Lighthouse CLI 或Dev Tools，它们会生成一个关于性能瓶颈的详细报告和用于简单优化的小提示。

总结

工具	CLI	CI	Summary
Lighthouse	✔️	❌	根据不同类型资源的规模或数量制定预算。
webpack	✔️	❌	基于 webpack 生成的文件大小和未压缩的文件大小指定预算
bundlesize	✔️	✔️	基于指定的资源大小和未压缩的文件大小的预算
Lighthouse Bot	❌	✔️	基于 Lighthouse 的分数的预算

译者的话

本篇文件详细讲解了利用哪些工具能够在项目中实现性能预算，并描述了它们的特性。

**但是我认为这些很难在国内的环境中实现。**因为国内的大环境是不停地高速迭代产品，很少关注性能问题。如果只是因为一小点性能而延误了上线时间，大部分领导都是无法接受的，挺无奈，也很现实。

虽然如此，但是作为技术人，还是希望能够做出一个高性能的项目，如果有个人项目的，绝对可以让你的产品性能更上一层楼，大胆放心地使用吧。
欢迎关注我的个人微信公众号：前端 stack，每周分享一篇外文技术翻译哦

---

原文传送门