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

Milica Mihajlija
Milica Mihajlija

您已經完成了許多艱鉅的任務,現在請使用 Lighthouse Bot 來自動化效能測試,確保速度不會變慢。

Lighthouse 將應用程式分類為 5 個類別,其中一個類別為效能。雖然您在每次編輯程式碼時,都能嘗試使用 DevToolsLighthouse CLI 監控效能變化,但不一定要如此。工具能為您完成繁瑣的工作Travis CI 是一項絕佳服務,會在您每次推送新程式碼時,自動在雲端執行應用程式測試。

Lighthouse Bot 與 Travis CI 整合,且其效能預算功能可確保您不會在沒有註意到的情況下意外降級效能。您可以設定存放區,這樣在 Lighthouse 分數低於您設定的門檻 (例如 < 96/100) 時,該存放區就不會允許合併提取要求。

GitHub 上的 Failing Lighthouse 機器人檢查
GitHub 上的 Lighthouse 機器人檢查功能。

雖然您可以在 localhost 上測試效能,但網站在運作伺服器上的執行速度通常並不相同。如要更清楚地實際情況,建議您將網站部署至測試伺服器。您可以使用任何代管服務,本指南將採用 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 上註冊帳戶,然後在個人資料的「設定」部分啟用 GitHub 應用程式整合。

在 Travis CI 上整合 GitHub 應用程式

擁有帳戶後

前往設定檔下方的「Settings」(設定),點選「Sync account」(同步處理帳戶) 按鈕,接著確認 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 的「Settings」底下,按一下存放區,查看專案的 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 機器人

友善的 Lighthouse Bot 會針對應用程式的 Lighthouse 分數進行更新。 而只需要收到存放區的邀請即可。

在 GitHub 上,前往專案設定,然後將「lighthousebot」新增為協作者 ([設定] > [協作者]):

Lighthouse 機器人協作者狀態

核准這些要求是手動程序,並非即時執行。開始測試之前,請確認 Lighthousebot 已核准其協作者狀態。同時,您還需要在 Travis 上為專案的環境變數新增另一個金鑰。請在這裡保留電子郵件,您的收件匣將收到 Lighthouse Bot 金鑰。📬

在 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 Bot 只會測試提取要求,因此如果您現在將其推送至主要分支版本,便會在 Travis 記錄中看到「This Script can only run on Travis PR 要求」。

如何觸發 Lighthouse 機器人測試:

  1. 結帳新的分行
  2. 將其推送至 GitHub
  3. 發出提取要求

靜待該提取要求頁面,然後等待 Lighthouse 機器人唱歌!🎤

通過 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 機器人留言。