出现在：快速加载时间

原文地址：web.dev/incorporate…

原文作者：web.dev/authors/mih…

发布时间：2019年2月1日

一旦你定义了一个性能预算，就应该设置构建过程来跟踪它。有许多工具可以让您为所选的性能指标定义阈值，并在您超出预算时警告您。了解如何选择一个最适合你的需求和当前设置的工具。🕵️♀️

灯塔业绩预算

Lighthouse是一款审计工具，它可以在几个关键领域对网站进行测试--性能、可访问性、最佳实践以及网站作为渐进式Web应用的表现。

Lighthouse的命令行版本（v5+）支持根据以下因素设置性能预算。

资源大小
资源数

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

document
font
image
media
other
script
stylesheet
third-party
total

预算是在JSON文件中设置的，在定义预算后，新的 "超预算 "栏会告诉你是否超出了任何限制。

灯塔报告中的 "预算 "部分

Webpack性能提示

Webpack是一个强大的构建工具，可以优化你的代码如何交付给用户。它还支持根据资产大小设置性能预算。

在webpack.config.js中开启性能提示，当你的bundle大小增长超过限制时，就会得到命令行警告或错误。这是一个在整个开发过程中保持对资产大小的注意的好方法。

在构建步骤之后，webpack会输出一个以颜色编码的资产及其大小的列表。任何超过预算的东西都会以黄色高亮显示。

高亮显示的bundle.js比你的预算大。

资产和入口点的默认限制都是250 KB。你可以在配置文件中设置自己的目标。

Webpack捆绑包大小警告

预算与未压缩的资产大小进行对比。未压缩的JavaScript大小与执行时间有关，大文件的执行时间会很长，尤其是在移动设备上。

压缩的资产大小会影响传输时间，这在慢速网络上非常重要。

额外的功能：webpack不仅会警告你，还会给你一个如何缩小捆绑的建议。💁

捆绑尺寸

Bundlesize 是一个简单的 npm 软件包，可以根据您设置的阈值测试资产大小。它可以在本地运行，并与 CI 集成。

Bundlesize CLI

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

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

Bundlesize 在一行中输出彩色编码的测试结果。

bundlesize CLI测试失败 ❌

通过bundlesize CLI测试 ✔️

CI上的捆绑尺寸

如果你把 bundlesize 与 CI 集成起来，自动执行拉取请求的大小限制，你就会得到 bundlesize 的最大价值。如果 bundlesize 测试失败，该拉取请求将不会被合并。它适用于GitHub上的Travis CI、CircleCI、Wercker和Drone的拉取请求。

Github上的Bundlesize检查状态

你今天可能有一个快速的应用程序，但添加新的代码往往会改变这一点。用bundlesize检查拉动请求将帮助你避免性能回归。Bootstrap、Tinder、Trivago和许多其他公司都使用它来控制预算。

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

默认情况下，它测试的是gzipped资产大小。你可以使用压缩选项切换到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上的拉取请求的分数低于你设置的阈值，**Lighthouse Bot可以阻止拉取请求被合并。**⛔

Lighthouse Bot在Github上检查状态。

Lighthouse Bot会对你的拉取请求进行评论，并更新分数。这是一个很好的功能，可以在代码发生变化时鼓励大家讨论性能问题。

灯塔对拉动请求的报告分数。💬

如果你发现你的拉取请求因为Lighthouse评分不佳而被阻止，可以使用Lighthouse CLI或在Dev Tools中进行审计。它会生成一份报告，详细介绍瓶颈问题和简单的优化提示。

总结

工具	CLI	CI	摘要
灯塔	✔️	❌	- 根据资源的大小或数量为不同类型的资源做预算。
webpack	✔️	❌	- 根据webpack生成的资产大小进行预算。 - 检查未压缩的大小。
bundlesize	✔️	✔️	- 根据特定资源的大小进行预算。 -检查压缩或未压缩的大小。
Lighthouse Bot	❌	✔️	- 根据灯塔公司的评分进行预算。

[Web翻译]将性能预算纳入到您的构建过程中