定義效能預算後,接下來請設定建構程序來追蹤。有許多工具可以讓您定義所選成效指標的閾值,並在超出預算時發出警告。請參閱相關說明,瞭解如何選擇最符合您需求與目前設定的方式。🕵?️ ♀️
Lighthouse 效能預算
Lighthouse 是一項稽核工具,可在幾個關鍵領域測試網站:效能、無障礙設計、最佳做法,以及網站做為漸進式網頁應用程式的成效。
Lighthouse (第 5 版以上) 指令列版本支援根據下列項目設定效能預算:
- 資源大小
- 資源數量
您可以為下列任何一種資源類型設定預算:
document
font
image
media
other
script
stylesheet
third-party
total
預算是透過 JSON 檔案設定,完成定義後,新的「超出預算」欄會指出目前是否超過任何限制。
Webpack 效能提示
Webpack 是功能強大的建構工具,可將程式碼提供給使用者的方式最佳化。也支援根據素材資源大小設定效能預算。
在 webpack.config.js
中啟用效能提示,以便在套件大小超過限制時收到指令列警告或錯誤。在開發過程中,這個做法能有效因應素材資源大小。
建構步驟後,webpack 會輸出以不同顏色標示的資產及其大小清單。任何超出預算的項目都會以黃色標明。
資產和進入點的預設限制為 250 KB。您可以在設定檔中自行設定目標。
預算會與未壓縮的素材資源大小進行比較。未壓縮的 JavaScript 大小與執行時間相關,大型檔案可能需要較長的執行時間,特別是在行動裝置上。
套裝組合
Bundlesize 是簡單的 npm 套件,可依據您設定的門檻測試資產大小。因此可在本機執行,並與持續整合環境整合。
套裝組合 CLI
指定閾值和要測試的檔案來執行 bundlesize CLI。
bundlesize -f "dist/bundle.js" -s 170kB
Bundlesize 會在同一行輸出不同顏色的測試結果。
CI 的 Bundlesize
只要將 Bundlesize 整合至 CI,即可自動對提取要求強制執行大小限制,讓 Bundlesize 充分發揮效益。如果 Bundlesize 測試失敗,系統不會合併該提取要求。這項做法可處理 GitHub 上搭配 Travis CI、CircleCI、Wercker 和 Drone 的提取要求。
您今天建構速度飛快的應用程式,但新增程式碼常常會改變這種情況。檢查採用 bundlesize 的提取要求可避免效能降低。Bootstrap、Tinder、Trivago 和許多其他人都會使用這款應用程式維護預算。
有了套件大小,就可以為每個檔案分別設定閾值。如果您在應用程式中分割一個套件,這個做法就特別實用。
根據預設,會測試 gzip 壓縮的素材資源大小。您可以利用壓縮選項切換至 brotli 壓縮,或將其完全關閉。
Lighthouse 機器人
Lighthouse Bot 與 Travis CI 整合,會依據五個 Lighthouse 稽核類別強制執行預算。例如將 Lighthouse 效能分數設為 100。比起個別資產預算和 Lighthouse 分數等條件,有時要留意單一數據,有時比較簡單。
將網站部署至測試伺服器後,Lighthouse 機器人會執行稽核作業。在 .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 可防止提取要求合併。⛔
Lighthouse Bot 後,可對您的提取要求加註最新分數。這是一項非常實用的功能,可以在程式碼變更時鼓勵討論效能。
如果您發現提取要求遭 Lighthouse 分數不佳封鎖,請透過 Lighthouse CLI 或開發人員工具執行稽核。產生的報表會列出瓶頸的詳細資料和簡易最佳化作業提示。
摘要
工具 | CLI | CI | 摘要 |
---|---|---|---|
燈塔 | ✔️ | ❌ |
|
Webpack | ✔️ | ❌ |
|
套裝組合大小 | ✔️ | ✔️ |
|
Lighthouse 機器人 | ❌ | ✔️ |
|