将性能预算纳入你的构建流程

通过集合保持井井有条 根据你的偏好保存内容并进行分类。

Milica Mihajlija

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

Lighthouse 性能预算

Lighthouse 是一款审核工具，可在几个关键领域（性能、无障碍、最佳实践以及你的网站作为渐进式 Web 应用的性能）中测试网站。

Lighthouse 的命令行版本 (v5+) 支持基于以下内容设置性能预算

• 资源大小
• 资源计数

你可以为以下任何资源类型设置预算

• document
• font
• image
• media
• other
• script
• stylesheet
• third-party
• total

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

Webpack 性能提示

Webpack 是一款功能强大的构建工具，用于优化代码向用户的交付方式。它还支持基于资源大小设置性能预算。

在 webpack.config.js 中开启性能提示，以便在你的捆绑包大小超出限制时获取命令行警告或错误。这是在整个开发过程中留意资源大小的好方法。

在构建步骤之后，webpack 会输出一个颜色编码的资源列表及其大小。任何超出预算的内容都以黄色突出显示。

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

预算与未压缩的资源大小进行比较。未压缩的 JavaScript 大小与执行时间有关，大文件可能需要很长时间才能执行，尤其是在移动设备上。

Bundlesize

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

Bundlesize CLI

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

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

Bundlesize 以一行输出颜色编码的测试结果。

用于 CI 的 Bundlesize

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

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

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

默认情况下，它测试 gzipped 资源大小。你可以使用 compression 选项切换到 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 然后会在你的拉取请求上评论更新后的分数。这是一个很棒的功能，可以鼓励在代码更改发生时就性能进行对话。

如果你发现你的拉取请求因 Lighthouse 分数不佳而被阻止，请使用 Lighthouse CLI 或在 开发者工具 中运行审核。它会生成一份报告，其中包含有关瓶颈和简单优化提示的详细信息。

总结