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

Milica Mihajlija

您已付出許多努力，讓網站速度變快，現在請使用 Lighthouse Bot 自動執行效能測試，確保網站速度維持在理想狀態。

Lighthouse 會根據 5 個類別為應用程式評分，其中一個類別就是效能。雖然您可以嘗試記得每次編輯程式碼時，都使用 DevTools 或 Lighthouse CLI 監控效能變化，但您不必這麼做。工具可以幫你處理繁瑣的工作。Travis CI 是一項很棒的服務，每次您推送新程式碼時，都會自動在雲端執行應用程式測試。

Lighthouse Bot 與 Travis CI 整合，效能預算功能可確保您不會在不知不覺中降低效能。您可以設定存放區，如果 Lighthouse 分數低於您設定的門檻 (例如 < 96/100)，就不允許合併提取要求。

GitHub 上的 Lighthouse Bot 檢查失敗 — 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

設定期間，控制台會詢問您一系列問題：

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

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

恭喜，您已準備好部署！執行作業：

firebase deploy

您將在瞬間擁有可用的應用程式。

3. 設定 Travis

您必須在 Travis 上註冊帳戶，然後在個人資料的「Settings」部分啟用 GitHub 應用程式整合功能。

Travis CI 上的 GitHub 應用程式整合

擁有帳戶後

前往個人資料下的「設定」，按下「同步帳戶」按鈕，並確認專案存放區列在 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 記錄，應該很快就會顯示「✔️ Deploy complete!」(部署完成！)

現在，每當您變更應用程式，系統就會自動將變更部署至 Firebase。

5. 設定 Lighthouse Bot

友善的 Lighthouse 機器人會提供應用程式的 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"
}

在 Travis 設定中新增 Lighthouse 機器人

最後一個訣竅是，每次發出提取要求後，都要測試應用程式的效能！

在 .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」(這個指令碼只能在 Travis 提取要求中執行)。

如要觸發 Lighthouse Bot 測試，請按照下列步驟操作：

查看新的分支版本
將其推送至 GitHub
提出提取要求

請在提取要求頁面稍候，等待 Lighthouse Bot 唱歌！🎤

Lighthouse 分數及格

通過 GitHub 檢查

成效分數很高、應用程式預算充足，且通過檢查！