原文地址：web.dev/using-light…

原文作者：web.dev/authors/mih…

发布时间：2019年1月28日

你已经付出了艰辛的努力，现在通过Lighthouse Bot自动进行性能测试，确保你的应用能保持快速。

Lighthouse会从5个方面对你的应用进行评分，其中一项就是性能。虽然你可以尝试在每次编辑代码时，用DevTools或Lighthouse CLI来监控性能变化，但你不必这样做。工具可以为你做这些繁琐的事情。Travis CI是一个很好的服务，每次你推送新代码时，它都会在云端自动为你的应用运行测试。

Lighthouse Bot与Travis CI集成，它的性能预算功能确保你不会在不经意间降低性能。你可以配置你的版本库，如果Lighthouse的分数低于你设定的阈值（如<96/100），它就不允许合并pull-requests。

Lighthouse Bot在GitHub上检查。

Lighthouse Bot曾被称为Lighthouse CI。

虽然你可以在localhost上测试性能，但你的网站在实时服务器上的表现通常会有所不同。为了更真实地了解情况，最好将你的网站部署在一个暂存服务器上。你可以使用任何主机服务，本指南将以Firebase主机为例。

1. 设置

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

克隆GitHub上的例子，并确保将其添加为GitHub账户上的仓库。

2. 部署到Firebase

要开始，你需要一个Firebase账户。一旦你处理好这些，在Firebase控制台中点击 "Add project "来创建一个新项目。

部署到Firebase

你需要Firebase CLI来部署应用程序。即使你已经安装了它，使用这个命令经常更新CLI到最新的版本也是一个好的做法。

npm install -g firebase-tools

要授权Firebase CLI，请运行

firebase login

现在初始化项目。

firebase init

在设置过程中，控制台会问你一系列问题。

当提示你选择功能时，选择 "托管"
对于默认的Firebase项目，选择你在Firebase控制台中创建的项目。
键入 "public "作为你的公共目录。
输入 "N"（no）配置为单页应用。

这个过程会在你的项目目录的根目录下创建一个firebase.json配置文件。

恭喜你，你已经准备好部署了! 运行。

firebase deploy

在一瞬间，你就会有一个直播应用。

3. 设置Travis

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

在Travis CI上集成GitHub应用

一旦你有了一个账号

进入你的配置文件下的设置，点击同步账户按钮，并确保你的项目repo被列在Travis上。

要启动持续集成，你需要做两件事。

要在根目录下有一个.travis.yml文件
通过常规的git推送来触发构建。

lighthouse-bot-starter repo已经有一个.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 master

在Travis中点击设置下的repo，可以看到你的项目的Travis仪表盘。如果一切正常，你会看到你的项目在几分钟内从黄色变成绿色。🎉

4. 使用Travis#自动部署Firebase

在步骤2中，您登录了您的Firebase账户，并通过命令行使用firebase deploy部署了应用程序。为了让Travis将您的应用程序部署到Firebase，您必须对其进行授权。怎么做呢？用一个Firebase令牌。🗝️🔥

授权firebase

要生成令牌，请运行这个命令

firebase login:ci

它会在浏览器窗口中打开一个新的标签，以便Firebase验证你。之后，回头看看控制台，你就会看到你刚生成的token。复制它并回到Travis。

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

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

将部署添加到你的Travis设置中

你需要下面的行来告诉Travis在每次成功构建后部署应用程序。将它们添加到.travis.yml文件的最后。🔚

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

把这个变化推送到GitHub上，然后等待你的第一次自动化部署。如果你看一下你的Travis日志，它应该很快就会说✔️部署完成！现在，每当你对你的应用程序进行更改时，它们将自动部署到Firebase。

现在，每当你对你的应用程序进行更改时，它们将被自动部署到Firebase。

5. 设置Lighthouse Bot

友好的Lighthouse Bot会更新你的应用的Lighthouse分数。它只需要邀请它进入你的repo。

在GitHub上，进入你的项目设置，添加 "lighthousebot "为合作者（设置>合作者）。

灯塔机器人的合作者状态

审批这些请求是一个手动的过程，所以它们并不总是即时发生。在你开始测试之前，请确保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": "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审计，所以用你的应用的URL替换https://staging.example.com（也就是your-app-123.firebaseapp.com）。

将你的标准设置得很高，并对设置进行调整，这样你就不会接受任何使应用性能分数低于95分的改动。

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

对Travis提出拉取请求以触发Lighthouse Bot测试

Lighthouse Bot只会测试拉取请求，所以如果你现在推送到主分支，你只会在Travis日志中看到 "This script can only be run on Travis PR requests"。

要触发Lighthouse Bot测试。

签出一个新分支
推送到Github
提出拉动请求

紧紧抓住那个拉动请求页面，等着灯塔机器人唱歌吧! 🎤

性能评分很好，应用在预算内，检查通过了!

[Web翻译]使用Lighthouse Bot设置性能预算