使用 Lighthouse Bot 设置性能预算

Milica Mihajlija

您已经努力实现了快速，现在通过使用 Lighthouse Bot 自动化性能测试来确保速度。

Lighthouse 对您的应用在 5 个类别中进行评分，其中一个类别是性能。虽然您可以尝试记住每次编辑代码时使用 DevTools 或 Lighthouse CLI 监控性能变化，但您不必这样做。工具可以为您完成繁琐的工作。Travis CI 是一项出色的服务，每次您推送新代码时，它都会在云端自动为您的应用运行测试。

Lighthouse Bot 与 Travis CI 集成，其性能预算功能确保您不会在不知不觉中意外降低性能。您可以配置您的存储库，使其不允许合并拉取请求，如果 Lighthouse 分数低于您设置的阈值（例如 < 96/100）。

Failing Lighthouse Bot checks on GitHub
Lighthouse Bot 在 GitHub 上进行检查。

虽然您可以在 localhost 上测试性能，但您的网站在实时服务器上的表现通常会有所不同。为了获得更真实的画面，最好将您的网站部署到暂存服务器。您可以使用任何托管服务；本指南将以 Firebase hosting 为例。

1. 设置

这个简单的应用可以帮助您对三个数字进行排序。

从 GitHub 克隆示例，并确保将其作为存储库添加到您的 GitHub 帐户。

2. 部署到 Firebase

要开始使用，您需要一个 Firebase 帐户。完成此操作后，通过单击“添加项目”，在 Firebase 控制台中创建一个新项目

部署到 Firebase

您需要 Firebase CLI 来部署应用。即使您已经安装了它，最好也经常使用此命令将 CLI 更新到最新版本

npm install -g firebase-tools

要授权 Firebase CLI，请运行

firebase login

现在初始化项目

firebase init

控制台将在设置期间询问您一系列问题

  • 当提示选择功能时，选择“Hosting”。
  • 对于默认的 Firebase 项目，选择您在 Firebase 控制台中创建的项目。
  • 输入“public”作为您的公共目录。
  • 键入“N”（否）以配置为单页应用。

此过程会在您的项目目录的根目录中创建一个 firebase.json 配置文件。

恭喜，您已准备好部署！运行

firebase deploy

在瞬间，您将拥有一个实时应用。

3. 设置 Travis

您需要在 Travis 上注册一个帐户，然后在您个人资料的“设置”部分下激活 GitHub Apps 集成。

GitHub Apps integration on Travis CI

一旦您有了帐户

转到您个人资料下的“设置”，点击“同步帐户”按钮，并确保您的项目仓库在 Travis 上列出。

要启动持续集成，您需要两件事

  1. 在根目录中有一个 .travis.yml 文件
  2. 通过执行常规的 git push 来触发构建

lighthouse-bot-starter 仓库已经有一个 .travis.yml YAML 文件

language: node_js
node_js:
  - "8.1.3"
install:
  - npm install
before_script:
  - npm install -g firebase-tools
script:
  - webpack

YAML 文件告诉 Travis 安装所有依赖项并构建您的应用。现在轮到您将示例应用推送到您自己的 GitHub 存储库。如果您尚未这样做，请运行以下命令

git push origin main

单击 Travis 中“设置”下的存储库以查看您的项目 Travis 仪表板。如果一切顺利，您将在几分钟内看到您的构建从黄色变为绿色。🎉

4. 使用 Travis 自动化 Firebase 部署

在步骤 2 中，您登录了您的 Firebase 帐户，并使用 firebase deploy 从命令行部署了应用。为了让 Travis 将您的应用部署到 Firebase，您必须对其进行授权。您如何做到这一点？使用 Firebase 令牌。🗝️🔥

授权 Firebase

要生成令牌，请运行此命令

firebase login:ci

它将在浏览器窗口中打开一个新标签页，以便 Firebase 可以验证您。之后，回头看看控制台，您将看到您新生成的令牌。复制它并返回 Travis。

在您项目的 Travis 仪表板中，转到更多选项 > 设置 > 环境变量。

将令牌粘贴到值字段中，将变量命名为 FIREBASE_TOKEN，然后添加它。

将部署添加到您的 Travis 设置

您需要以下几行来告诉 Travis 在每次成功构建后部署应用。将它们添加到 .travis.yml 文件的末尾。 🔚

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive

将此更改推送到 GitHub 并等待您的第一次自动部署。如果您查看您的 Travis 日志，它应该很快会显示 ✔️ 部署完成！

现在，每当您更改您的应用时，它们都会自动部署到 Firebase。

5. 设置 Lighthouse Bot

友好的 Lighthouse Bot 会更新您的应用的 Lighthouse 分数。它只需要您的仓库的邀请。

在 GitHub 上，转到您项目的设置并添加“lighthousebot”作为协作者（设置>协作者）

Lighthouse bot collaborator status

批准这些请求是一个手动过程，因此它们并不总是立即发生。在您开始测试之前，请确保 lighthousebot 已批准其协作者身份。同时，您还需要在 Travis 上为您的项目的环境变量添加另一个密钥。在此处留下您的电子邮件，您将在收件箱中收到一个 Lighthouse Bot 密钥。📬

在 Travis 上，将此密钥添加为环境变量，并将其命名为 LIGHTHOUSE_API_KEY

将 Lighthouse Bot 添加到您的项目

接下来，通过运行以下命令将 Lighthouse Bot 添加到您的项目

npm i --save-dev https://github.com/ebidel/lighthousebot

并将此位添加到 package.json

"scripts": {
  "lh": "lighthousebot"
}

将 Lighthouse Bot 添加到您的 Travis 配置

对于最后一个技巧，在每次拉取请求后测试应用的性能！

在 .travis.yml 中，在 after_success 中添加另一个步骤

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive
  - npm run lh -- https://staging.example.com

它将在给定的 URL 上运行 Lighthouse 审核，因此将 https://staging.example.com 替换为您的应用的 URL（即 your-app-123.firebaseapp.com）。

设定高标准并调整设置，以便您不接受任何将性能分数降至 95 以下的应用更改

- npm run lh -- --perf=95 https://staging.example.com

创建一个拉取请求以在 Travis 上触发 Lighthouse Bot 测试

Lighthouse Bot 将仅测试拉取请求，因此如果您现在推送到主分支，您将在 Travis 日志中只会收到“此脚本只能在 Travis PR 请求上运行”。

要触发 Lighthouse Bot 测试

  1. 检出一个新分支
  2. 将其推送到 GitHub
  3. 创建一个拉取请求

在拉取请求页面上耐心等待 Lighthouse Bot 唱歌！🎤

Passing Lighthouse scores

Passing GitHub checks

性能得分很高，应用在预算范围内，并且检查已通过！

更多 Lighthouse 选项

还记得 Lighthouse 如何测试 5 个不同的类别吗？您可以使用 Lighthouse Bot 标志强制执行其中任何类别的分数

--perf  # performance
--pwa   # progressive web app score
--a11y  # accessibility score
--bp    # best practices score
--seo   # SEO score

示例

npm run lh -- --perf=93 --seo=100 https://staging.example.com

如果性能得分降至 93 以下或 SEO 得分降至 100 以下，这将使 PR 失败。

您也可以选择不使用 --no-comment 选项获取 Lighthouse Bot 的评论。