6 個 Angular 性能調優技巧

已發表: 2023-02-03

Angular 是一個用於構建 Web 應用程序的強大 JavaScript 框架，但隨著應用程序的增長，它可能會變得緩慢且難以管理。 Angular 性能調優是確保 Angular 應用程序平穩高效運行的重要部分。

在本文中，我們將探討一些優化 Angular 應用程序性能的提示和技巧，包括縮短加載時間、減小應用程序大小以及減少不必要的 DOM 更新次數的技術。無論您是經驗豐富的 Angular 開發人員還是剛剛起步，這些提示和技巧都將幫助您提高應用程序的性能並確保它為您的用戶順利運行。

因此，讓我們從簡單的 Angular 應用程序性能調整的主要技術開始。

Angular 性能調優技巧

您可以通過各種技巧輕鬆提高 Angular 應用程序的性能。但是，我們為您挑選了六個最佳角度應用程序優化技巧。他們來了：

使用 AoT 編譯
使用 OnPush 變化檢測策略
使用純管道
在 ngFor 上使用 TrackBy
代碼拆分
改善頁面加載

讓我們詳細了解它們中的每一個。

使用 AoT 編譯

提高 Angular 應用程序性能的一個重要技巧是使用提前 (AoT) 編譯。 AoT 是一種在構建時預編譯 Angular 組件和模板的技術，而不是在運行時編譯它們。這可以顯著縮短應用程序的加載時間，因為瀏覽器不需要在應用程序首次加載時花時間編譯模板和組件。

AoT 還通過在 JavaScript 代碼中內聯模板和組件工廠來幫助減小應用程序的大小。這減少了加載應用程序所需的網絡請求數，並減小了應用程序的整體大小，這有助於縮短加載時間。

要在 Angular 應用程序中啟用 AoT 編譯，您需要使用 Angular CLI 通過“–aot”標誌構建您的應用程序。這將為您的應用程序啟用 AoT 編譯，並且生成的構建將針對性能進行優化。此外，您可以直接使用“ngc”編譯器等工具，這是 Angular CLI 用於 AoT 編譯的命令行工具。

使用 OnPush 變化檢測策略

OnPush 更改檢測策略是一種提高 Angular 應用程序性能的方法，它僅在輸入屬性更改或發出事件時檢查組件中的更改。這與默認的“OnPush”策略相反，該策略在每次有變化檢測週期時檢查組件及其所有子組件中的變化。

要使用 OnPush 策略，您需要導入 ChangeDetectorRef 模塊並將組件的 @Component 裝飾器的 changeDetection 屬性設置為 ChangeDetectionStrategy.OnPush。

OnPush 是一種強大的策略，可以提高您的應用程序的性能，但它也會使應用程序變得更加複雜。請務必在實施此策略後徹底測試您的應用程序，以確保它按預期工作。

使用純管道

Angular 中的純管道是一種僅在輸入值或傳遞給管道的參數發生變化時才運行的管道。這可以提高 Angular 應用程序的性能，因為它減少了管道運行的次數。

要在 Angular 中創建純管道，您需要將 pure: true 屬性添加到管道的 @Pipe 裝飾器中。

需要注意的是，當你創建一個純管道時，只有當輸入值或傳遞給管道的參數發生變化時，Angular 才會重新運行管道。如果管道依賴於未作為輸入傳遞的其他數據或狀態，則管道可能不會產生正確的輸出。

還值得注意的是，如果您在使用 OnPush 更改檢測策略的組件內有一個純管道，它只會在發出 Input 或事件時執行管道，這可以進一步提高應用程序的性能。

請記住，如果您使用具有復雜功能的純管道，它可能會對應用程序的性能產生負面影響，因為在輸入值更改之前管道不會執行。在這種情況下，最好使用不純的管道。

在 ngFor 上使用 TrackBy

trackBy 是 Angular 中的一項功能，它允許您為 ngFor 循環中的每個項目指定唯一標識符。這可以通過減少集合更改時需要創建和銷毀的 DOM 元素的數量來提高 Angular 應用程序的性能。

要在 ngFor 循環中使用 trackBy，您需要傳遞一個函數作為 trackBy 屬性的值。該函數應接收當前項目的索引和項目本身，並返回該項目的唯一標識符。

<div *ngFor=”let item of items; trackBy：trackByFn”>{{ item.name }}</div>

trackByFn(index: number, item: any) {

返回 item.id;

}

在此示例中，trackByFn 函數返回每個項目的唯一標識符作為其 id 屬性。

代碼拆分

代碼拆分是一種用於通過減少應用程序的初始加載時間來提高 Angular 應用程序性能的技術。它涉及將應用程序的代碼分解成更小、更易於管理的塊，這些塊可以在用戶瀏覽應用程序時按需加載。

這允許應用程序只加載當前頁面所需的代碼，而不是一次加載所有代碼，這可以顯著縮短應用程序的初始加載時間。這個技術可以使用 Angular Router 模塊和 loadChildren 屬性來實現。

改善頁面加載

有幾種方法可以改善 Angular 應用程序的頁面加載，其中一些包括：

代碼拆分：如前所述，代碼拆分是一種涉及將應用程序代碼分解為可按需加載的更小塊的技術。這可以顯著改善應用程序的初始加載時間。
延遲加載：延遲加載是一種涉及僅在需要時才加載模塊的技術。這還可以通過減少初始加載時需要加載的代碼量來幫助縮短應用程序的初始加載時間。
優化圖像：通過壓縮圖像和使用適當的圖像格式來優化圖像還可以通過減少需要下載的圖像的大小來幫助改善頁面加載。
使用瀏覽器緩存：啟用瀏覽器緩存還可以通過允許瀏覽器在本地存儲資源來幫助提高頁面加載，這樣就不必再次下載它們。

最後的話

總之，Angular 是一個功能強大且用途廣泛的框架，可用於構建複雜的高性能 Web 應用程序。然而，與任何框架一樣，有一些最佳實踐和技術可用於優化 Angular 應用程序的性能。通過使用代碼拆分、延遲加載等技術，開發人員可以顯著改善 Angular 應用程序的加載時間和整體性能。

Smarsh Infotech 是一家受歡迎的 IT 服務外包公司，可以成為您未來的應用程序開發合作夥伴。如果您計劃在數字平台上發展業務，我們可以竭盡所能為您提供幫助。讓我們交流並討論您的項目想法。

另請閱讀： The New Angular 14：閱讀所有相關內容