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

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

Bundlesize CLI

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

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

Bundlesize 会将以不同颜色标示的测试结果输出到一行中。

适用于持续集成的 Bundlesize

如果将 bundlesize 与 CI 集成以自动对拉取请求施加大小限制，则可以充分利用 bundlesize。如果 bundlesize 测试失败，该拉取请求将不会合并。它适用于 GitHub 上的 Travis CI、CircleCI、Wercker 和 Drone 的拉取请求。

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

使用 bundlesize，您可以单独为每个文件设置阈值。如果您要在应用中拆分 bundle，这尤其有用。

默认情况下，它会测试 gzip 资源大小。您可以使用压缩选项切换到 brotli 压缩或彻底关闭该功能。

Lighthouse 聊天机器人

Lighthouse 聊天机器人与 Travis CI 集成，并根据五个 Lighthouse 审核类别中的任何一个强制执行预算。例如，为 Lighthouse 性能得分设置 100 的预算。有时，关注单个数字比关注单个素材资源预算更简单，并且 Lighthouse 得分会将许多因素考虑在内。

将网站部署到预演服务器后，Lighthouse 聊天机器人会运行审核。在 .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 聊天机器人可以阻止拉取请求合并。⛔

然后，Lighthouse 聊天机器人会根据更新后的得分对您的拉取请求发表评论。这是一项简洁的功能，有助于在代码更改时就性能展开讨论。

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

摘要