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

Milica Mihajlija
Milica Mihajlija
X GitHub 首頁

定義效能預算後，接著就能設定建構程序 追蹤資訊有許多工具可用來設定閾值 所選的成效指標，並在超出預算時發出警告。瞭解詳情 如何選擇最符合貴機構需求與目前設定的版本🕵️‍♀️

Lighthouse 效能預算

Lighthouse 這項稽核工具可從幾個重點領域測試網站，包括效能、無障礙功能、最佳做法，以及網站做為漸進式網頁應用程式的成效。

Lighthouse 的指令列版本 (v5+) 支援根據下列項目設定效能預算：

  • 資源大小
  • 資源數量

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

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

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

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

Webpack 效能提示

Webpack 是一項強大的建構工具，可協助您以最佳方式將程式碼提供給使用者。此外，也支援根據素材資源大小設定成效預算。

只要在 webpack.config.js 中開啟效能提示，即可在套件大小超過限制時收到指令列警告或錯誤訊息。在開發期間，這是保持素材資源大小的好方法。

在建構步驟之後，Webpack 會輸出以不同顏色標示的資產及其大小清單。任何超出預算的項目都會以黃色醒目顯示。

Webpack 輸出內容醒目顯示 bundle.js
醒目顯示的 bundle.js 超過您的預算

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

Webpack 套件大小警告
Webpack 套裝組合大小警告 ⚠️

系統會比較預算與未壓縮素材資源大小。未壓縮的 JavaScript 大小與執行時間有關，而且大型檔案可能需要較長的執行時間才能完成，特別是在行動裝置上。

，瞭解如何調查及移除這項存取權。
Webpack 效能最佳化建議
額外功能：Webpack 不會提醒您，還會提供縮減組合大小的建議。💁
，瞭解如何調查及移除這項存取權。

套裝組合大小

Bundlesize 是簡單的 npm 套件，可根據您設定的門檻測試素材資源大小。可以在本機執行，並與 CI 整合。

套裝組合 CLI

指定門檻和要測試的檔案，藉此執行 bundlesize CLI。

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

Bundlesize 會輸出一行以不同顏色標示的測試結果。

無法執行 bundlesize CLI 測試
組合式 CLI 測試失敗 ❌
通過 bundlesize CLI 測試
通過 bundlesize CLI 測試 ✔️

CI 的套裝組合大小

如果將 bundlesize 與 CI 整合，即可自動在提取要求強制執行大小限制，進而充分發揮 bundle 的效益。如果 bundlesize 測試失敗，系統就不會合併該提取要求。GitHub 上的提取要求適用於 Travis CI、CircleCI、Wercker 和 Drone 的提取要求。

GitHub 上的 Bundlesize 檢查狀態
GitHub 上的 Bundlesize 檢查狀態

你今天推出的應用程式快速又快，但加入新程式碼通常能解決這個問題。使用 bundlesize 檢查提取要求，可避免發生效能迴歸問題。Bootstrap、Tinder、Trivago 及許多其他公司都使用這套系統來掌控預算。

透過 bundlesize ，您可以分別設定每個檔案的閾值。如果您要在應用程式中分割套件，這項功能就能派上用場。

根據預設，這項工具會測試以 gzip 格式顯示的素材資源大小。你可以使用壓縮選項來改用亂數壓縮或完全關閉。

燈塔機器人

燈塔機器人

Lighthouse Bot 與 Travis CI 整合，且會根據五個 Lighthouse 稽核類別中的任一類別強制執行預算。例如，將 Lighthouse 成效分數設為 100 的預算。留意單個素材資源的預算有時更簡單，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 機器人檢查狀態
GitHub 上的 Lighthouse 機器人檢查狀態

接著，Lighthouse Bot 再以更新後的分數對提取要求發表留言。這是一項便利功能，可鼓勵發布商在變更程式碼時討論成效。

提取要求的 Lighthouse 回報分數
提取要求的 Lighthouse 報告分數 👇?

如果發現 Lighthouse 分數不佳，導致提取要求遭到封鎖，請使用 Lighthouse CLI 或開發人員工具進行稽核。系統會產生報表，並附上瓶頸詳細資料，以及簡易最佳化的提示。

摘要

工具 CLI CI 摘要
燈塔 ✔️ ❌
  • 根據資源大小或數量區分不同類型資源的預算。
Webpack ✔️ ❌
  • 根據 webpack 產生的資產大小決定預算。
  • 檢查未壓縮時的大小。
套裝組合大小 ✔️ ✔️
  • 根據特定資源的大小設定預算。
  • 檢查壓縮或未壓縮的大小。
Lighthouse 機器人 ❌ ✔️
  • 以 Lighthouse 分數為依據的預算。