介紹

每個用戶都希望他們的應(yīng)用程序能夠更快地加載并流暢地運行，從而提供無縫的體驗。但是，很可能在應(yīng)用程序優(yōu)化時出現(xiàn)。為此，Angular 是最佳選擇，因為它是一種高性能的前端框架。

它提供了許多增強應(yīng)用程序性能的工具和技術(shù)。那么，讓我們了解如何提高 Angular 應(yīng)用程序的性能。該博客涵蓋了 Angular 的提示和技巧以及Angular 性能優(yōu)化的最佳工具，可幫助您加快 Angular 應(yīng)用程序的性能。

Angular 性能優(yōu)化技術(shù)

遵循最佳實踐和 Angular 優(yōu)化技術(shù)，您可以消除典型的瓶頸并加速您的應(yīng)用程序。

AOT（提前）編譯器的使用

Angular 提供兩種類型的編譯器：及時編譯器和提前編譯器。直到 Angular 8，Angular 默認的編譯模式是及時（JIT）。但是，自 Angular 9 發(fā)布以來，默認的編譯方式是 Ahead of Time（AOT）。

它涉及在開發(fā)期間進行編譯，并且無需部署包。此外，它還有助于減小應(yīng)用程序的大小、提供時間來呈現(xiàn)各個組件并提高應(yīng)用程序性能。

此外，在應(yīng)用過程中，他們的模板綁定錯誤會被識別并快速失敗，因此開發(fā)過程變得更快。

要使用 AOT，開發(fā)人員可以使用 Angular CLI 命令。

ng構(gòu)建-Aot

Tree Shaking 以減少 Bundle 的大小

在 Angular 中，Tree Shaking 用于減小 JavaScript 包的大小。Tree shaking 從應(yīng)用程序中刪除未使用的代碼，并將其轉(zhuǎn)移到更小、更高效的包中。

底層構(gòu)建系統(tǒng)在構(gòu)建過程中像 Angular CLI 一樣執(zhí)行它。此外，構(gòu)建系統(tǒng)分析代碼并檢測應(yīng)用程序未調(diào)用的未使用代碼、函數(shù)或類。

因此，通過刪除未使用的代碼，JavaScript 的小尺寸有助于更快地加載并提高整體性能。但是，如果您使用的是 Angular CLI，則可以將其設(shè)置為默認值。

要在 Angular 應(yīng)用程序中啟用 tree shaking，您可以在 Angular CLI 中使用以下命令：

ng build --prod --optimization=true --build-optimizer=true

延遲加載模塊

延遲加載是 Angular 用于提高性能的默認功能。它是一種具有眾多功能模塊的 Angular 技術(shù)，有助于縮短初始加載時間。當用戶導航到特定的應(yīng)用程序部分時，只有必要的模塊才會被延遲加載。

它有助于同時僅加載一些應(yīng)用程序并減少加載時間。此外，模塊被創(chuàng)建為路由并將應(yīng)用程序拆分為更小的塊，每個塊包含一個特定的功能或部分。

通過在 Angular 應(yīng)用程序中實現(xiàn)延遲加載，您可以使應(yīng)用程序響應(yīng)更快、參與度更高。此外，它還減少了需要通過網(wǎng)絡(luò)傳輸?shù)臄?shù)據(jù)量和服務(wù)器負載。

使用 loadChildren 屬性執(zhí)行模塊的延遲加載。

變更檢測優(yōu)化

更改檢測可以檢測用戶數(shù)據(jù)何時更改或更新。它是 Angular 框架的主要特性之一，對于維護 Angular 應(yīng)用程序的一致性至關(guān)重要。

更改檢測是指將更改應(yīng)用于應(yīng)用程序的數(shù)據(jù)模型，以便可以相應(yīng)地修改視圖。變更檢測需要克服三種策略：OnPush檢測策略、不可變數(shù)據(jù)結(jié)構(gòu)、純pips。

使用 OnPush 變化檢測策略

OnPush 是 Angular 中的一種變更檢測策略，被稱為“checkAlways”策略。Angular 使用默認的變更檢測策略在每個事件（例如時間、HTTP 請求和用戶輸入）之后檢查組件的數(shù)據(jù)模型變更。

變更檢測策略的好處之一是它減少了變更檢測周期的數(shù)量，提高了性能并減少了內(nèi)存使用。此外，此策略指示 Angular 僅在組件的輸入屬性更改時檢查更改。

它有助于了解應(yīng)用程序并確保他們使用延遲加載等最佳實踐以獲得最佳性能。更改策略可以識別用戶的數(shù)據(jù)，然后更新 DOM 以請求更改。

要使用更改檢測策略，您可以使用以下 OnPush 屬性：

ChangeDetectionStrategy.OnPush

不可變數(shù)據(jù)和使用純管道

不可變數(shù)據(jù)結(jié)構(gòu)對于優(yōu)化 Angular 應(yīng)用程序中的變更檢測很有價值。它是指創(chuàng)建后不能更改的數(shù)據(jù)。通過使用不變性數(shù)據(jù)，開發(fā)人員可以確保應(yīng)用程序的數(shù)據(jù)模型在必要時得到更新，并有助于提高整體性能。

Pips 分為兩類：不純和純 Pipes。使用 Pure Pipes 在數(shù)據(jù)顯示給用戶之前轉(zhuǎn)換數(shù)據(jù)。關(guān)于變化檢測性能，并非所有管道都是平等創(chuàng)建的。通過使用純管道，您可以減少不必要的更改周期數(shù)。

隨著時間的推移，不純的 Pipe 會為相同的輸入產(chǎn)生大量的輸出。要定義純管道，您可以使用以下內(nèi)容：

@管道（{
  名稱：'myPurePipe'，
  純：真})

要定義非純管道，您可以使用以下屬性：

@管道（{
  名稱：'myImpurePipe'})

避免模板中的昂貴操作

避免昂貴的操作至關(guān)重要，因為它會影響應(yīng)用程序的性能。此外，為避免在模板中進行操作，您應(yīng)該使模板盡可能簡單以提高性能。

此外，這意味著您正在避免模板中的復(fù)雜邏輯和計算，并將它們轉(zhuǎn)移到組件服務(wù)中。開發(fā)人員可以使用這種技術(shù)來優(yōu)化模板的性能。

此外，捕獲昂貴的操作可以幫助多次減少相同的重新計算結(jié)果并提高效率。

正確使用 ngZone

ngZone 服務(wù)是 Angular 用于管理變更檢測過程的強大工具。但是，過多使用 ngZone 會影響應(yīng)用程序的性能。因此，相應(yīng)地使用它來限制意外后果至關(guān)重要。

在 Angular 區(qū)域之外使用 ngZone 將有利于提高其性能。這可以通過使用第三方庫（如 RxJS）提供的與區(qū)域無關(guān)的 API 來實現(xiàn)。此外，它還可以幫助開發(fā)人員避免更改檢測周期并清理不必要的任務(wù)。

此外，此功能有助于在正確的時間自動更正更改檢測。它不會讓第三方 API 損害應(yīng)用程序的性能。

最小化 HTTP 請求的數(shù)量

Angular 發(fā)出的每個 HTTP 請求都包括 TCP 連接建立、DNS 解析和 TLS 協(xié)商。這將顯著提高 Angular 的性能。此外，最小化 HTTP 請求的最佳實踐之一是使用緩存。

通過緩存早期請求的響應(yīng)，您可以避免冗余請求并減少 HTTP 請求的數(shù)量。此外，將多個 HTTP 請求合并為一個請求可以增強 Angular 中的性能優(yōu)化。

提高 Angular 性能的技巧

知道策略就足以增強。盡管如此，最重要的是實施以下技巧來提高 Angular 應(yīng)用程序的性能：

?? 減少圖像和其他資產(chǎn)的大小

圖片和其他資產(chǎn)的大小可能會很大，從而導致加載時間增加和 Angular 性能下降。減小圖像和資產(chǎn)的大小可優(yōu)化應(yīng)用程序性能并提高工作效率。

您可以通過壓縮圖像并使用 Compressor.io 或 TinyPNG 等工具利用微小的 CSS 和 JavaScript 文件來減少它。此外，您必須考慮 Angular 性能優(yōu)化技術(shù)，例如漸進加載和延遲加載。

?? 使用緩存改善加載時間

另一個強大的 Angular 性能優(yōu)化技術(shù)是使用捕獲來增加加載時間。通過緩存數(shù)據(jù)，您可以減少對服務(wù)器發(fā)出的 HTTP 請求的數(shù)量并縮短應(yīng)用程序加載時間。

此外，您可以使用 Angular HTTPClient 和 Service Workers 等工具來實現(xiàn)多個級別，例如服務(wù)器緩存、瀏覽器緩存和客戶端緩存。通過更短的加載時間，您的應(yīng)用程序可以運行得更快并且顯著。

?? 盡量減少第三方庫的數(shù)量

庫太多會影響 Angular 應(yīng)用程序的性能調(diào)優(yōu)。每個庫都會為應(yīng)用程序增加價值，但有時會對性能產(chǎn)生負面影響。此外，每個庫都會增加文件大小并減慢其加載時間。

因此，避免使用執(zhí)行相似或相同功能的多個庫是理想的。此外，您不必依賴一組庫來執(zhí)行特定的可靠任務(wù)和開銷任務(wù)。

?? 避免不必要的代碼重復(fù)

在 Angular 中，代碼重復(fù)會導致代碼效率低下，并對應(yīng)用程序性能產(chǎn)生負面影響。代碼重復(fù)會增加應(yīng)用程序的文件大小并產(chǎn)生功能問題。對于 Angular 應(yīng)用程序性能優(yōu)化，您應(yīng)該避免不必要的代碼重復(fù)，并且必須編寫可維護和可重用的干凈、高效的代碼。

此外，對于Angular 的性能最佳實踐，使用 Angular 的內(nèi)置依賴注入機制在服務(wù)和組件之間共享功能。

?? 代碼剖析和分析

要識別 Angular 應(yīng)用程序中的性能瓶頸，必須使用代碼概要分析和分析。您可以通過分析代碼和識別效率低下的區(qū)域來改進特定任務(wù)。

此外，一些用于改進應(yīng)用程序的分析和分析工具包括 Angular Angury 和 Chrome Dev Tools。您可以使用這些工具優(yōu)化代碼并改進 Angular 應(yīng)用程序的性能和用戶體驗。

測量角度性能的工具

除了策略和技巧之外，以下工具還可以幫助您衡量 Angular 性能并帶來最佳結(jié)果。

1. Chrome 開發(fā)者工具

它是 Google Chrome 瀏覽器的一組工具和功能，可提供 Angular 應(yīng)用程序的分析和調(diào)試。它包括內(nèi)存和 CPU 分析功能以及網(wǎng)絡(luò)分析，以檢查和分析 Angular 性能。

此外，您可以使用時間線視圖來可視化 Angular 性能改進并實時識別潛在的瓶頸。此外，該工具還允許您檢查應(yīng)用程序的網(wǎng)絡(luò)活動并呈現(xiàn) HTML。

2. 燈塔

來自 Google 的開源工具可幫助您審核 Angular 應(yīng)用程序的性能、最佳實踐可訪問性和 SEO。Lighthouse 提供應(yīng)用程序性能的詳細報告以及有助于優(yōu)化速度的可操作見解。

燈塔測量網(wǎng)站或網(wǎng)絡(luò)應(yīng)用程序的響應(yīng)時間。它包括性能指標，例如交互時間、總阻塞時間和內(nèi)容性能。它還可以模擬多種網(wǎng)絡(luò)條件來測試性能。

3.網(wǎng)頁測試

它是一個免費的在線工具，允許您從全球不同位置和瀏覽器測試應(yīng)用程序性能。使用 WebPageTest，您可以測量應(yīng)用程序的加載速度并檢測 Angular 性能問題。

該工具提供有關(guān)速度、加載時間和渲染時間的有見地的報告。WebPageTest 提供了廣泛的高級指標來衡量 Angular 應(yīng)用程序的性能，包括第一個字節(jié)和繪制的時間。

4. 角度性能瀏覽器

它是一個旨在分析和測量 Angular 應(yīng)用程序性能的工具。Angular Performance Explorer 提供了對渲染、變更檢測和可視化界面的洞察，用于探索 Angular 應(yīng)用程序的性能指標。

此外，它還包括用于優(yōu)化代碼的內(nèi)存使用、網(wǎng)絡(luò)請求和 CPU，并總結(jié)了潛在問題以及解決方案。這些工具還提供建議，例如優(yōu)化變更檢測策略和延遲加載模塊。

最后一句話

（言鼎科技）