定義效能預算後,接著就能設定建構程序 追蹤資訊有許多工具可用來設定閾值 所選的成效指標,並在超出預算時發出警告。瞭解詳情 如何選擇最符合貴機構需求與目前設定的版本🕵️♀️
Lighthouse 效能預算
Lighthouse 這項稽核工具可從幾個重點領域測試網站,包括效能、無障礙功能、最佳做法,以及網站做為漸進式網頁應用程式的成效。
Lighthouse 的指令列版本 (v5+) 支援根據下列項目設定效能預算:
- 資源大小
- 資源數量
您可以為下列任一資源類型設定預算:
document
font
image
media
other
script
stylesheet
third-party
total
預算會在 JSON 檔案中設定,並在定義新的「超出預算」後欄,指出是否超出任何限制。
![Lighthouse 報表中的預算部分](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/budgets-section-lighthou-1f943ff9e538d.png?authuser=19&hl=zh-tw)
Webpack 效能提示
Webpack 是一項強大的建構工具,可協助您以最佳方式將程式碼提供給使用者。此外,也支援根據素材資源大小設定成效預算。
只要在 webpack.config.js
中開啟效能提示,即可在套件大小超過限制時收到指令列警告或錯誤訊息。在開發期間,這是保持素材資源大小的好方法。
在建構步驟之後,Webpack 會輸出以不同顏色標示的資產及其大小清單。任何超出預算的項目都會以黃色醒目顯示。
![Webpack 輸出內容醒目顯示 bundle.js](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-output-highlighti-b33963dc70391.png?authuser=19&hl=zh-tw)
資產和進入點的預設限制為 250 KB。您可以在設定檔中自行設定目標。
![Webpack 套件大小警告](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-bundle-size-warni-412c8dae0aeea.jpg?authuser=19&hl=zh-tw)
系統會比較預算與未壓縮素材資源大小。未壓縮的 JavaScript 大小與執行時間有關,而且大型檔案可能需要較長的執行時間才能完成,特別是在行動裝置上。
,瞭解如何調查及移除這項存取權。![Webpack 效能最佳化建議](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/webpack-performance-optim-174c6e4d62345.jpg?authuser=19&hl=zh-tw)
套裝組合大小
Bundlesize 是簡單的 npm 套件,可根據您設定的門檻測試素材資源大小。可以在本機執行,並與 CI 整合。
套裝組合 CLI
指定門檻和要測試的檔案,藉此執行 bundlesize CLI。
bundlesize -f "dist/bundle.js" -s 170kB
Bundlesize 會輸出一行以不同顏色標示的測試結果。
![無法執行 bundlesize CLI 測試](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/failing-bundlesize-cli-te-25490fc5a9ce2.png?authuser=19&hl=zh-tw)
![通過 bundlesize CLI 測試](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/passing-bundlesize-cli-te-b41d7dc6c93a.png?authuser=19&hl=zh-tw)
CI 的套裝組合大小
如果將 bundlesize 與 CI 整合,即可自動在提取要求強制執行大小限制,進而充分發揮 bundle 的效益。如果 bundlesize 測試失敗,系統就不會合併該提取要求。GitHub 上的提取要求適用於 Travis CI、CircleCI、Wercker 和 Drone 的提取要求。
![GitHub 上的 Bundlesize 檢查狀態](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/bundlesize-check-status-742e3e8c62318.jpg?authuser=19&hl=zh-tw)
你今天推出的應用程式快速又快,但加入新程式碼通常能解決這個問題。使用 bundlesize 檢查提取要求,可避免發生效能迴歸問題。Bootstrap、Tinder、Trivago 及許多其他公司都使用這套系統來掌控預算。
透過 bundlesize ,您可以分別設定每個檔案的閾值。如果您要在應用程式中分割套件,這項功能就能派上用場。
根據預設,這項工具會測試以 gzip 格式顯示的素材資源大小。你可以使用壓縮選項來改用亂數壓縮或完全關閉。
燈塔機器人
![燈塔機器人](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-3e2ca69e8688f.png?authuser=19&hl=zh-tw)
Lighthouse Bot 與 Travis CI 整合,且會根據五個 Lighthouse 稽核類別中的任一類別強制執行預算。例如,將 Lighthouse 成效分數設為 100 的預算。留意單個素材資源的預算有時更簡單,Lighthouse 分數會考量許多因素。
![燈塔得分 ÷](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-scores-c11f98857eaf.png?authuser=19&hl=zh-tw)
將網站部署至測試環境伺服器後,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 機器人檢查狀態](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-bot-check-stat-76287c5940f5b.png?authuser=19&hl=zh-tw)
接著,Lighthouse Bot 再以更新後的分數對提取要求發表留言。這是一項便利功能,可鼓勵發布商在變更程式碼時討論成效。
![提取要求的 Lighthouse 回報分數](https://web.developers.google.cn/static/articles/incorporate-performance-budgets-into-your-build-tools/image/lighthouse-reporting-scor-f1b8e2faca379.png?authuser=19&hl=zh-tw)
如果發現 Lighthouse 分數不佳,導致提取要求遭到封鎖,請使用 Lighthouse CLI 或開發人員工具進行稽核。系統會產生報表,並附上瓶頸詳細資料,以及簡易最佳化的提示。
摘要
工具 | CLI | CI | 摘要 |
---|---|---|---|
燈塔 | ✔️ | ❌ |
|
Webpack | ✔️ | ❌ |
|
套裝組合大小 | ✔️ | ✔️ |
|
Lighthouse 機器人 | ❌ | ✔️ |
|