在建構程序中納入效能預算

Milica Mihajlija
Milica Mihajlija

定義效能預算後,您可以設定建構程序,以便追蹤效能預算。您可以使用多種工具為所選成效指標定義門檻,並在預算超支時收到警告。瞭解如何選擇最符合需求和目前設定的選項。🕵?️‍♀️

Lighthouse 是一項稽核工具,可針對效能、無障礙功能、最佳做法,以及網站做為漸進式網頁應用程式的效能等幾個重點領域,對網站進行測試。

Lighthouse 的命令列版本 (第 5 版以上) 可根據下列項目設定效能預算

  • 資源大小
  • 資源數

您可以為下列任一資源類型設定預算:

  • document
  • font
  • image
  • media
  • other
  • script
  • stylesheet
  • third-party
  • total

預算會在 JSON 檔案中設定,定義後,新的「超出預算」欄會顯示是否超出任何限制。

Lighthouse 報表中的「預算」部分
Lighthouse 報告中的「預算」部分

Webpack 效能提示

Webpack 是一項功能強大的建構工具,可用來改善程式碼傳送至使用者的做法。也支援根據素材資源大小設定效能預算。

webpack.config.js 中開啟效能提示,當套件大小超過限制時,即可收到指令列警告或錯誤。這麼做有助於您在開發過程中留意素材資源大小。

在建構步驟後,webpack 會輸出以顏色編碼的資產清單和資產大小。超出預算的項目會以黃色醒目顯示。

以高亮顯示 bundle.js 的 Webpack 輸出內容
醒目顯示的 bundle.js 大小超過預算

資產和進入點的預設限制為 250 KB。您可以在設定檔中設定自己的目標。

Webpack 套件大小警告
Webpack 套件大小警告 ⚠️

系統會比較預算與未壓縮的素材資源大小。未壓縮的 JavaScript 大小與執行時間有關,大型檔案的執行時間可能會很長,尤其是在行動裝置上。

Webpack 效能最佳化建議
額外功能:webpack 不僅會發出警告,還會提供如何縮減套件大小的最佳化建議。💁?

Bundlesize

Bundlesize 是簡單的 npm 套件,可根據您設定的閾值測試素材資源大小。這項工具可在本機執行,並與 CI 整合。

Bundlesize CLI

指定閾值和要測試的檔案,執行 bundlesize CLI

bundlesize -f "dist/bundle.js" -s 170kB

Bundlesize 會在同一行中輸出以顏色編碼的測試結果。

失敗的 bundlesize CLI 測試
Bundlesize CLI 測試失敗 ❌
通過 bundlesize CLI 測試
Bundlesize CLI 測試通過 ✔️

CI 的 Bundlesize

如要充分利用 bundlesize,請將其與 CI 整合,以便自動對拉取要求強制執行大小限制。如果 bundlesize 測試失敗,系統就不會合併該提取要求。適用於 GitHub 上的提取要求,並搭配使用 Travis CICircleCIWerckerDrone

在 GitHub 上查看 Bundlesize 檢查狀態
Bundlesize 檢查狀態 (GitHub)

您今天可能擁有速度快的應用程式,但新增程式碼通常會改變這項情況。檢查包含 bundlesize 的提取要求,有助於避免效能倒退。Bootstrap、Tinder、Trivago 和其他許多公司都使用這項功能控管預算。

有了 bundlesize,您就可以為每個檔案分別設定閾值。如果您要將應用程式中的套件分割,這項功能就特別實用。

根據預設,會測試已壓縮的素材資源大小。您可以使用壓縮選項切換為 brotli 壓縮或完全關閉壓縮功能。

Lighthouse Bot

Lighthouse Bot

Lighthouse Bot 可與 Travis CI 整合,並根據任何五個 Lighthouse 稽核類別強制執行預算。舉例來說,Lighthouse 效能分數的預算為 100。有時比起個別素材資源預算,監控單一數字會更簡單,而且 Lighthouse 分數會考量許多因素。

Lighthouse 分數 💯?
Lighthouse 分數 💯?

將網站部署至測試伺服器後,Lighthouse Bot 就會執行稽核作業。在 .travis.yml 中,使用 --perf--a11y--bp--seo--pwa 選項,為特定 Lighthouse 類別設定預算。請盡量維持在綠色區,分數至少為 90 分。

after_success:
  - ./deploy.sh # Deploy the PR changes to staging server
  - npm run lh -- --perf=96 https://staging.example.com # Run Lighthouse test

如果 GitHub 提取要求的分數低於您設定的門檻,Lighthouse Bot 可以防止提取要求合併。⛔

在 GitHub 上檢查 Lighthouse Bot 狀態
在 GitHub 上檢查 Lighthouse Bot 的檢查狀態

接著,Lighthouse Bot 會在您的提取要求中加上更新的分數。這項實用功能可在程式碼變更時,鼓勵大家討論效能。

提取要求的 Lighthouse 報表分數
Lighthouse 報表評分 (在提取要求中) 💬?

如果您發現拉取要求因 Lighthouse 分數不佳而遭到封鎖,請使用 Lighthouse CLI開發人員工具執行稽核作業。這項工具會產生報表,詳細說明瓶頸和簡單最佳化提示。

摘要

工具 CLI CI 摘要
燈塔 ✔️
  • 根據不同類型的資源大小或數量設定預算。
webpack ✔️
  • 根據 webpack 產生的素材資源大小設定預算。
  • 檢查未壓縮的大小。
bundlesize ✔️ ✔️
  • 根據特定資源的大小設定預算。
  • 檢查壓縮或未壓縮的大小。
Lighthouse Bot ✔️
  • 以 Lighthouse 分數為依據的預算。