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

Milica Mihajlija
Milica Mihajlija
X GitHub 首页

确定性能预算后，就该设置构建流程了 以便进行跟踪有很多工具可以让您定义阈值 ，并在超出预算时向您发出警告。了解详情 如何选择最符合您需求和当前设置的一项。🕵️‍♀️

Lighthouse 性能预算

Lighthouse 是一款审核工具，可从几个关键方面对网站进行测试，包括性能、无障碍功能、最佳做法以及您的网站作为渐进式 Web 应用的表现。

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

  • 资源大小
  • 资源数量

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

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

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

<ph type="x-smartling-placeholder">
</ph> Lighthouse 报告中的“预算”部分 <ph type="x-smartling-placeholder">
</ph> “预算”Lighthouse 报告中的部分

Webpack 性能提示

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

在 webpack.config.js 中开启性能提示，以便在软件包大小超出限制时收到命令行警告或错误。这样可以在整个开发过程中密切关注素材资源尺寸。

构建步骤完成后，Webpack 会输出一个以不同颜色标示的资源及其大小列表。超出预算的所有项目都会以黄色突出显示。

<ph type="x-smartling-placeholder">
</ph> 突出显示 bundle.js 的 Webpack 输出 <ph type="x-smartling-placeholder">
</ph> 突出显示的 bundle.js 超出了您的预算

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

<ph type="x-smartling-placeholder">
</ph> Webpack 软件包大小警告 <ph type="x-smartling-placeholder">
</ph> Webpack 软件包大小警告 ⚠️

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

。 <ph type="x-smartling-placeholder">
</ph> Webpack 性能优化建议
额外功能：Webpack 不仅会发出警告，还会为你提供有关如何缩减内容包大小的建议。💁
。

软件包大小

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

Bundlesize CLI

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

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

Bundlesize 会在一行内输出以不同颜色标示的测试结果。

<ph type="x-smartling-placeholder">
</ph> bundlesize CLI 测试失败 <ph type="x-smartling-placeholder">
</ph> 软件包大小 CLI 测试失败 ❌
<ph type="x-smartling-placeholder">
</ph> 通过 bundlesize CLI 测试 <ph type="x-smartling-placeholder">
</ph> 通过 bundlesize CLI 测试 ✔️

用于持续集成的软件包大小

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

<ph type="x-smartling-placeholder">
</ph> GitHub 上的 Bundlesize 检查状态 <ph type="x-smartling-placeholder">
</ph> GitHub 上的 Bundlesize 检查状态

您现在可能已经有一款速度飞快的应用，但添加新代码通常会改变这一点。使用 bundlesize 检查拉取请求有助于避免性能下降。Bootstrap、Tinder、Trivago 和许多其他组织都使用它来控制预算。

通过 bundlesize，您可以分别为每个文件设置阈值。如果您要在应用中拆分 bundle，此方法特别有用。

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

Lighthouse 机器人

Lighthouse 机器人

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

<ph type="x-smartling-placeholder">
</ph> 灯塔得分 💯? <ph type="x-smartling-placeholder">
</ph> 灯塔得分 💯?

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

<ph type="x-smartling-placeholder">
</ph> GitHub 上的 Lighthouse 聊天机器人检查状态 <ph type="x-smartling-placeholder">
</ph> GitHub 上的 Lighthouse 聊天机器人检查状态

然后，Lighthouse 聊天机器人对您的拉取请求添加评论，并提供更新后的得分。这是一个很棒的功能，可以在代码更改时鼓励关于性能的讨论。

<ph type="x-smartling-placeholder">
</ph> Lighthouse 报告拉取请求的得分 <ph type="x-smartling-placeholder">
</ph> Lighthouse 报告拉取请求的得分 ☰

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

摘要

工具 CLI CI 摘要
灯塔 ✔️ ❌
  • 根据资源的大小或数量为不同类型的资源设置预算。
Webpack ✔️ ❌
  • 根据 webpack 生成的资源大小设置预算。
  • 检查未压缩的大小。
软件包大小 ✔️ ✔️
  • 根据特定资源的规模确定预算。
  • 检查压缩或未压缩的大小。
Lighthouse 机器人 ❌ ✔️
  • 基于 Lighthouse 得分的预算。