本頁面由 Cloud Translation API 翻譯而成。

使用 Lighthouse 機器人設定效能預算

Milica Mihajlija

為加快速度，現在您不妨試試自動化功能，確保程序快速您可以使用 Lighthouse Bot 進行效能測試。

Lighthouse 為應用程式評分 5 個類別，其中一個是「成效」。您可以試著記住使用DevTools監控效能變化或 Lighthouse CLI 每次修改程式碼就不用這麼做善用工具處理繁瑣的事務提供專屬建議Travis CI：每當您推送新程式碼時，都會自動在雲端執行應用程式測試。

Lighthouse Bot 與 Travis CI 整合，其效能預算功能可確保您不會在不知情的情況下意外降低效能。您可以設定存放區，讓系統在 Lighthouse 分數低於您設定的門檻 (例如 < 96/100) 時，禁止合併提取要求。

在 GitHub 上失敗的 Lighthouse Bot 檢查 — GitHub 上的 Lighthouse Bot 檢查。

，瞭解如何調查及移除這項存取權。

雖然您可以在本機上測試效能，但網站在實際伺服器上的表現通常會有所不同。如要取得更準確的資料，建議您將網站部署至測試伺服器。您可以使用任何代管服務；本指南將介紹 Firebase 代管。

1. 設定

這個簡單的應用程式可協助你排序三個數字。

從 GitHub 複製範例。請務必將其新增為 GitHub 帳戶的存放區。

2. 部署至 Firebase

您需要擁有 Firebase 帳戶才能開始使用。完成上述步驟後，請按一下「Add project」在 Firebase 控制台中建立新專案：

部署至 Firebase

您需要 Firebase CLI 才能部署應用程式。即使已安裝應用程式建議您經常更新請使用下列指令將 CLI 更新為最新版本：

npm install -g firebase-tools

如要授權 Firebase CLI，請執行以下指令：

firebase login

現在初始化專案：

firebase init

在設定過程中，控制台會詢問一系列問題：

系統提示您選取功能時，請選擇「託管」。
如果是預設的 Firebase 專案，請選取您建立的專案也可前往 Firebase 控制台
輸入「public」做為公開目錄。
輸入「N」(否) 設為單頁應用程式。

這項程序會在叢集的根目錄中建立 firebase.json 設定檔，專案目錄

恭喜，您可以部署了！執行作業：

firebase deploy

您很快就能擁有上線應用程式。

3. 設定 Travis

您必須在 Travis 上註冊帳戶，然後在個人資料的「Settings」(設定) 專區下啟用 GitHub Apps 整合功能。

Travis CI 上的 GitHub Apps 整合

擁有帳戶後

前往「個人資料」底下的「設定」，然後點選「同步帳戶」按鈕，確定您專案存放區是否列在 Travis 中

如要啟動持續整合，您需要完成以下兩件事：

如何在根目錄中建立 .travis.yml 檔案
透過一般舊 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 中「Settings」(設定) 下方的存放區，即可查看專案的 Travis 資訊主頁。如果一切正常，您就會看到從黃色到綠色的版本幾分鐘內🎉

4. 使用 Travis 自動化 Firebase 部署作業

在步驟 2 中，您登入了 Firebase 帳戶並從指令列中加上 firebase deploy。為了讓 Travis 將您的應用程式部署到 Firebase，必須經過授權。該怎麼做呢？使用 Firebase 權杖。 🗝️🔥

授權 Firebase

如要產生權杖，請執行下列指令：

firebase login:ci

系統會在新的瀏覽器視窗中開啟新分頁，讓 Firebase 驗證您的身分。完成後，請查看控制台，您會看到新鑄造的符記。複製卡片，然後返回 Travis。

在專案的 Travis 資訊主頁中，依序前往「More options」>「Settings」>「Environment variables」。

將符記貼到值欄位中，將變數命名為 FIREBASE_TOKEN，然後新增。

在 Travis 設定中新增部署作業

您需要以下幾行程式碼，才能指示 Travis 在每次成功建構後部署應用程式。請將這些內容新增至 .travis.yml 檔案的結尾。🔚

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

將這項變更推送至 GitHub，並等候第一次的自動化部署作業。如果您查看 Travis 記錄檔，很快就會看到 ✔️ 完成部署！

現在，只要您對應用程式進行變更，系統就會自動將變更部署至 Firebase。

5. 設定 Lighthouse 機器人

友善 Lighthouse Bot 會更新應用程式的 Lighthouse 分數。只要邀請對方加入您的存放區即可。

在 GitHub 中前往專案設定，並將「lighthousebot」新增為協作者 (依序點選「Settings」>「Collaborators」)：

Lighthouse 機器人協作者狀態

核准這些要求需要人工作業，因此不一定每次都會發生立即上手開始測試前，請確認 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

系統會針對指定網址執行 Lighthouse 稽核，因此請將 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
提出提取要求

請耐心等待 Lighthouse Bot 發出通知，🎤

通過 Lighthouse 分數

通過 GitHub 檢查

成效分數很高、應用程式預算低於上限，且檢查已通過！