最近在看「今晚來點 Web 前端效能優化大補帖：一次搞定指標 × 工具 × 技巧，打造超高速網站」，開章就提到 Google LightHouse 有 CI 工具可以整在 Git 裡。

不過書裡的範例是跟 Github 整合，那因為公司用的是 GitLab，所以就花了點時間研究 GitLab，初步測試成功，也可以透過 Google API 將報告暫存起來並產生連結。

這邊記錄使用方法，希望未來可以再跟 PR 合在一起 (繼續研究 XD)

在本機跑 Google LightHouse

先來分享如何在本機跑 Google LightHouse

▼ 首先請安裝 LightHouse：

$ npm install -g lighthouse

▼ 接著 build 你的專案

$ npm run build

▼ 啟動專案 (我是用 serve 的套件模擬環境)

$ serve -s dist

▼ 接著會得到一個 localhost 位置，請用 LightHouse 檢測這個網站的效能

$ lighthouse http://localhost:5173/

▼ 偵測完畢後，會在本機產生一份 html 檔案，提示訊息如下，打開這份 HTML 可以看到檢測報告

$ LH:Printer html output written to /Users/muki/Documents/00.project/localhost_2022-11-22_16-00-13.report.html +53ms

▼ 如果希望跑完檢測後，直接跳出 HTML 檔案，可以在網址後面加入 --view 指令

$ lighthouse http://localhost:5173/ --view

整合 GitLab CI/CD 自動化偵測

在專案目錄下新增 .gitlab-ci.yml，我們使用的鏡像檔是 edicom/lighthouse:latest

stages:
- lighthouse

lighthouse:
  stage: lighthouse
  image: edicom/lighthouse:latest
  script:
    - npm install
    - npm run build
    - lhci autorun --collect.staticDistDir="./dist" --collect.settings.chromeFlags="--no-sandbox" -–upload.target=temporary-public-storage -–assert.preset="lighthouse:recommended" || echo "LHCI failed!"
  allow_failure: true
  except:
    refs:
      - master

以上！完成！

我這邊設定是排除 master branch，如果要測試記得在非 master branch 下試試看唷。

卡了很久的部分，在於每次丟到 GitLab 時，他都會產生一個隨機的 port，導致 LightHouse 讀取 timeout，原本看官網文件有提到，設定靜態目錄為 --collect.staticDistDir="./dist"，就不需要管那個隨機的 port，但我試了發現沒有用。

爬了很多文章，看到有人說要再加入 --collect.settings.chromeFlags="--no-sandbox"，加上去之後就可以成功執行了，開心～。

配置設定檔

如果想要設定的東西太多，可以拉出來獨立成一個檔案，官方有提供多種命名方式，我自己是命名成 .lighthouserc.json

▼ 可以將在自動化檔案的配置獨立出來

{
  "ci": {
    "collect": {
      "numberOfRuns": 5,
      "staticDistDir": "./dist",
      "settings": {
        "chromeFlags": "--no-sandbox"
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

▼ 然後設定 .gitlab-ci.yml 的 lhci config 為這隻 json 檔

- lhci autorun --config="./.lighthouserc.json" || echo "LHCI failed!"

官方文件

關於更多的 LightHouse CI 文件，官方的說明很詳細，有興趣的朋友可以自行點閱

lighthouse-ci/configuration.md at main · GoogleChrome/lighthouse-ci

Automate running Lighthouse for every commit, viewing the changes, and preventing regressions - lighthouse-ci/configuration.md at main · GoogleChrome/lighthouse-ci

https://github.com/GoogleChrome/lighthouse-ci

目前看起來感覺對 Github 的支援度比較好(?，書中提到可以在 Github CI workflow 與 PR 的 status check 顯示偵測的內容，我也想要再研究研究，怎麼跟 Gitlab 的 PR 整合，或是有更方便的檢視方法。

未來如果有相關的進展，都會更新在這篇文章。

3

5

發生錯誤。