透過 Angular CLI 提供效能預算

監控套件的大小變化，確保應用程式持續保持快速。

Minko Gechev

雖然最佳化 Angular 應用程式十分重要，但您如何確保其效能不會隨著時間而下降？您可以透過引入成效指標，並在每次變更程式碼時監控這些指標！

其中一個重要的指標是應用程式附帶的 JavaScript 大小。您可以導入效能預算，監控每個建構或拉取要求，確保最佳化效果持續維持。

計算成效預算

您可以使用這個線上預算計算工具，根據您希望的互動時間，估算應用程式可載入的 JavaScript 數量。

預算計算器

在 Angular CLI 中設定效能預算

設定 JavaScript 目標預算後，您可以使用 Angular 指令列介面 (CLI) 強制執行。如要瞭解運作方式，請參閱 GitHub 上的這款範例應用程式。

您會看到 angular.json 中已設定下列預算：

"budgets": [{
  "type": "bundle",
  "name": "main",
  "maximumWarning": "170kb",
  "maximumError": "250kb"
}]

以下是指定內容的摘要：

  • 名為 main 的 JavaScript 套件有預算。
  • 如果 main 套件大於 170 KB，Angular CLI 會在您建構應用程式時在主控台顯示警告。
  • 如果 main 套件組合大小超過 250 KB，建構作業就會失敗。

接著，請嘗試執行 ng build --prod 來建構應用程式。

您應該會在主控台中看到這則錯誤訊息：

預算失敗

如要修正建構錯誤，請查看 app.component.ts，其中包含來自 rxjs/internal/operators 的匯入項目。這是私人匯入項目，不應由 rxjs 的消費者使用。這會大幅增加套件大小！更新為正確的匯入內容 rxjs/operators，然後再次執行建構作業，您就會看到系統成功通過預算檢查。

請注意，由於 Angular CLI 預設會啟用差異式載入功能，因此 ng build 指令會產生兩個應用程式版本：

  • 適用於瀏覽器的版本，支援 ECMAScript 2015。這個版本包含較少的 polyfill，並採用較新穎的 JavaScript 語法。這種語法更具表達力，可產生較小的套件。
  • 針對舊版瀏覽器不支援 ECMAScript 2015 的版本。舊版語法不夠表達力，且需要更多 polyfill，導致套件體積變大。

範例應用程式的 index.html 檔案會參照這兩個版本，讓新式瀏覽器可利用較小的 ECMAScript 2015 版本，而舊版瀏覽器則可改用 ECMAScript 5 版本。

在持續整合中實施預算

持續整合 (CI) 可讓您輕鬆監控應用程式的預算變化。幸運的是，您可以使用 Angular CLI 建構應用程式，這是設定這項功能最快速的方式，而且不需要額外步驟！只要 JavaScript 套件超出預算，程序就會以代碼 1 結束，且建構作業會失敗。

如有需要，您也可以使用 bundlesize 和 Lighthouse 強制執行效能預算。Angular CLI 和 Lighthouse 的效能預算的主要差異在於檢查作業的執行時機。Angular CLI 會在建構期間執行檢查作業，查看正式版素材資源並驗證其大小。不過，Lighthouse 會開啟已部署的應用程式版本，並評估素材資源大小。這兩種做法各有利弊。Angular CLI 執行的檢查作業雖然不夠健全，但速度會快得多，因為它是單一磁碟查詢。另一方面，LightWallet 的 Lighthouse 可以考量動態載入的資源，執行非常精確的檢查，但每次執行時都需要部署及開啟應用程式。

bundlesize 與 Angular CLI 的預算檢查功能非常相似，主要差異在於 bundlesize 可直接在 GitHub 的使用者介面中顯示檢查結果。

結論

請使用 Angular CLI 建立效能預算，確保 Angular 應用程式的效能不會隨著時間而降低：

  1. 您可以使用預算計算工具，或遵循貴機構的做法，為資源大小設定基準。
  2. 在 projects.[PROJECT-NAME].architect.build.configurations.production.budgets 下方的 angular.json 中設定大小預算
  3. 系統會在每個 Angular CLI 建構作業中自動強制執行預算。
  4. 建議您在持續整合作業中加入預算監控功能 (也可以使用 Angular CLI 達成)。