透過 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 執行的檢查作業雖然不夠健全，但速度會快得多，因為它是單一磁碟查詢。另一方面，Lighthouse of 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 達成)。