将性能预算纳入构建流程中

Milica Mihajlija
Milica Mihajlija
X GitHub 首页

定义性能预算后，接下来需要设置构建流程以跟踪预算。您可以使用多种工具为所选效果指标定义阈值，并在超出预算时收到提醒。了解如何选择最符合您需求和当前设置的选项。🕵️‍♀️

Lighthouse 性能预算

Lighthouse 是一款审核工具，可在几个关键方面测试网站：性能、可访问性、最佳实践，以及网站作为渐进式 Web 应用的表现。

Lighthouse（v5 及更高版本）的命令行版本支持根据以下条件设置性能预算：

  • 资源大小
  • 资源数量

您可以为以下任一资源类型设置预算：

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

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

Lighthouse 报告中的“预算”部分
Lighthouse 报告中的“预算”部分

Webpack 性能提示

Webpack 是一个强大的构建工具，用于优化向用户分发代码的方式。它还支持根据素材资源大小设置性能预算。

在 webpack.config.js 中开启性能提示，以便在软件包大小超出限制时收到命令行警告或错误。在整个开发过程中，这是一个很好的方式来关注素材资源的大小。

构建步骤完成后，webpack 会输出按颜色编码的资源及其大小列表。超出预算的所有项目都会以黄色突出显示。

突出显示 bundle.js 的 Webpack 输出
突出显示的 bundle.js 超出了您的预算

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

Webpack 软件包大小警告
Webpack 软件包大小警告 ⚠️

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

Webpack 性能优化建议
附加功能：webpack 不仅会向您发出警告，还会就如何缩减软件包大小提供建议。💁?

Bundlesize

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

Bundlesize CLI

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

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

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

bundlesize CLI 测试失败
软件包大小 CLI 测试失败 ❌
通过 bundlesize CLI 测试
通过软件包大小 CLI 测试 ✔️

CI 的 Bundlesize

如果您将 bundlesize 与 CI 集成，以便自动对拉取请求强制执行大小限制，则可以充分发挥 bundlesize 的价值。如果 bundlesize 测试失败，系统不会合并相应拉取请求。它适用于 GitHub 上的拉取请求，可与 Travis CI、CircleCI、Wercker 和 Drone 搭配使用。

GitHub 上的 Bundlesize 检查状态
GitHub 上的 Bundlesize 检查状态

您的应用目前可能运行速度很快，但添加新代码通常会改变这一点。检查包含 bundlesize 的拉取请求有助于避免性能回归。Bootstrap、Tinder、Trivago 及其他许多人都用它来控制预算。

通过 bundlesize，您可以分别为每个文件设置阈值。如果您要在应用中拆分软件包，此功能尤为有用。

默认情况下，它会测试经过 GZIP 压缩的资源大小。您可以使用压缩选项切换到 brotli 压缩或完全关闭它。

Lighthouse Bot

Lighthouse Bot

Lighthouse 聊天机器人与 Travis CI 集成，并基于 Lighthouse 五种审核类别中的任意一类来强制执行预算。例如，为 Lighthouse 性能得分设置 100 的预算。有时，跟踪单个数字比跟踪各个素材资源预算更简单，而且 Lighthouse 评分会考虑很多因素。

Lighthouse 得分 💯?
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 可能会阻止合并拉取请求。⛔

GitHub 上的 Lighthouse Bot 检查状态
Lighthouse 聊天机器人在 GitHub 上检查状态

然后，Lighthouse Bot 会对您的拉取请求进行评论，并提供更新后的得分。这是一个很实用的功能，有助于在代码发生变化时讨论性能。

Lighthouse 报告拉取请求的得分
拉取请求的 Lighthouse 报告得分 💬

如果您发现自己的拉取请求因 Lighthouse 评分较低而被阻止，请使用 Lighthouse CLI 或在开发者工具中运行审核。它会生成一个报告，其中包含有关瓶颈的详细信息以及简单优化提示。

摘要

工具 CLI CI 摘要
灯塔 ✔️ ❌
  • 针对不同类型资源的预算（基于其大小或数量）。
webpack ✔️ ❌
  • 预算取决于 webpack 生成的资源的大小。
  • 检查未压缩的大小。
bundlesize ✔️ ✔️
  • 基于特定资源大小的预算。
  • 检查压缩或未压缩的大小。
Lighthouse 机器人 ❌ ✔️
  • 基于 Lighthouse 得分设置预算。