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

Milica Mihajlija

定義效能預算後，接下來請設定建構程序來追蹤。有許多工具可以讓您定義所選成效指標的閾值，並在超出預算時發出警告。請參閱相關說明，瞭解如何選擇最符合您需求與目前設定的方式。🕵?️ ♀️

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 或開發人員工具執行稽核。產生的報表會列出瓶頸的詳細資料和簡易最佳化作業提示。

摘要