使用 Lighthouse 聊天机器人设置性能预算

Milica Mihajlija
Milica Mihajlija

您已为提高速度而付出了很多努力,现在不妨使用 Lighthouse 聊天机器人自动执行性能测试,确保您能保持快速运行。

Lighthouse 会将您的应用分为 5 个类别,其中一个就是性能类别。虽然您在每次修改代码时可以尝试使用 DevToolsLighthouse CLI 监控性能变化,但这并非强制要求。工具可为您完成繁琐的工作Travis CI 是一项出色的服务,每当您推送新代码时,它都会自动在云中运行应用测试。

Lighthouse 聊天机器人与 Travis CI 集成,其性能预算功能可确保您不会在不知情的情况下意外降级性能。您可以配置代码库,以便在 Lighthouse 得分低于您设置的阈值(例如 < 96/100)时不允许合并拉取请求。

GitHub 上 Lighthouse 机器人检查失败
GitHub 上的 Lighthouse 聊天机器人检查。

虽然您可以在 localhost 上测试性能,但您的网站在实时服务器上的表现通常有所不同。为了获得更真实的结果,最好将您的网站部署到预演服务器。您可以使用任何托管服务;本指南将对 Firebase 托管进行介绍。

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 应用集成。

Travis CI 上的 GitHub 应用集成

开设账号后

前往您的个人资料下的“设置”,点击“同步帐号”按钮,然后确保您的项目代码库已列在 Travis 上。

如需启动持续集成,您需要做两件事:

  1. 在根目录下有一个 .travis.yml 文件
  2. 通过常规的旧 Git 推送触发构建

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 信息中心。如果一切正常,您的 build 几分钟就会从黄色变为绿色。🎉

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 日志,应该很快就会看到 ✔️ Deploy 完成!

现在,只要您对应用进行更改,相应更改都会自动部署到 Firebase。

5. 设置 Lighthouse 聊天机器人

友好的 Lighthouse 聊天机器人会为您提供您应用的 Lighthouse 得分。 它只需要获得您的代码库的邀请即可。

在 GitHub 上,前往项目的设置,然后将“lighthousebot”添加为协作者(设置 > 协作者):

Lighthouse 聊天机器人协作者状态

批准这些请求需要手动完成,因此不一定会立即完成。在开始测试之前,请确保灯塔机器人已批准其协作者状态。与此同时,您还需要向 Travis 上项目的环境变量再添加一个密钥。请在此处留下电子邮件,您会在收件箱中收到 Lighthouse 聊天机器人密钥。📬

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

将 Lighthouse 聊天机器人添加到您的项目中

接下来,运行以下命令,将 Lighthouse 聊天机器人添加到您的项目中:

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

然后将此位添加到 package.json

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

将 Lighthouse 聊天机器人添加到您的 Travis 配置中

对于最后一个技巧,请在每个拉取请求后测试应用性能!

.travis.yml 中,在 after_success 中再添加一个步骤:

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

它将对指定网址运行 Lighthouse 审核,因此请将 https://staging.example.com 替换为您的应用的网址(即 your-app-123.firebaseapp.com)。

将评分设定为较高的标准并微调设置,让您不接受使性能得分低于 95 的应用任何更改:

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

发出拉取请求以在 Travis 上触发 Lighthouse 聊天机器人测试

Lighthouse 聊天机器人只会测试拉取请求,因此如果您现在推送到主分支,则会在 Travis 日志中看到“此脚本只能在 Travis PR 请求上运行”。

如需触发 Lighthouse 聊天机器人测试,请执行以下操作:

  1. 签出新分支
  2. 将它推送到 GitHub
  3. 发出拉取请求

请耐心等待该拉取请求页面,等待 Lighthouse 机器人唱歌!🎤

通过灯塔的得分

通过 GitHub 检查

性能得分很高,应用预算不足,已通过检查!

更多 Lighthouse 选项

还记得 Lighthouse 如何测试 5 种不同的类别吗?您可以对任何带有 Lighthouse 机器人标志的扩展程序强制执行得分:

--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 聊天机器人的注释。