# angular效能優化的小技巧 ## 1.刪除不必要的程式碼 加快 Angular的速度，最簡單方法是刪除不必要的程式碼。 更少的程式碼意味著更快的載入、解析和執行 。 ### 避免重覆程式碼 優化的最佳方法是首先要避免重覆程式碼的問題 Example:增加function函數來作價格的格式化轉 ```typescript= formatPrice(price: number) { return '$' + price.toFixed(2); } ``` 其實angular已經有不同的Pipes可以直接運作，不必要另起爐灶 ✅ 優化代碼（使用內置 Angular Pipe） ```typescript= <p>Price: {{ price | currency }}</p> ``` ### 刪除重複程式碼 有時，我們會在不知不覺中多次編寫相同的 logic，而不是重用它。 Example: ❌ 不良做法（Angular 元件中的重複程式碼） ```typescript= // Component A getFullName(user: { firstName: string; lastName: string }) { return user.firstName + ' ' + user.lastName; } // Component B getFullName(user: { firstName: string; lastName: string }) { return user.firstName + ' ' + user.lastName; } ``` 在兩個地方有相同的邏輯。相反，應該將其function在service中使用： ✅ 優化代碼（通過 Service 調用 Logic） ```typescript= @Injectable({ providedIn: 'root' }) export class UserService { getFullName(user: { firstName: string; lastName: string }) { return `${user.firstName} ${user.lastName}`; } } ``` 現在兩個Component都可以使用 UserService.getFullName（user），避免重複。 ### 避免導入大型未使用的模組 Example: ❌ 不良做法 （導入整個module） ```typescript= import * as rxjs from 'rxjs'; export class DataService { fetchData() { return rxjs.of([1, 2, 3]).pipe( rxjs.map(numbers => numbers.map(n => n * 2)) ); } } ``` 即使只使用 of（） 和 map（）， 整個 RxJS 也會被捆綁在一起。 因為在 rxjs 下導入了整個 rxjs module，所以 Angular 無法判斷哪些部分未使用 這會導致不必要的程式碼膨脹 ，從而減慢載入時間。 ✅ 優化代碼（僅導入您需要的內容） 相反， 請僅導入必要的函數和運算： ```typescript= // optimized-example.service.ts import { of } from 'rxjs'; import { map } from 'rxjs/operators'; export class DataService { fetchData() { return of([1, 2, 3]).pipe( map(numbers => numbers.map(n => n * 2)) ); } } ``` ## 2. 使用 Lazy Loading Angular 的 loadComponent 功能支援component-level lazy loading 允許依需求載入元件，而不是一次載入所有元件 少了初始載入時間並提高了 Angular 應用程式的性能 ```typescript= import { Routes } from '@angular/router'; export const routes: Routes = [ { path: 'product/:id', loadComponent: () => import('./product-details/product-details.component').then( (m) => m.ProductDetailsComponent ) }, ]; ``` ## 3. 在 Angular 中使用 @let @let 語法提供了直接在 Angular 中創建變數的簡單方法，這些變數可以在整個template 中重複使用，使template 更簡潔 、 更易於維護 例如，開發人員經常使用async pipe 異步管道來處理異步數據 多次使用async pipe異步管道可能會創建多個訂閱 ，從而導致性能問題。 Example: ```typescript= <div>Cart Total: {{ total$ | async }}</div> <div>Final Amount: {{ total$ | async }}</div> ``` 這會建立 total$ 的多個訂閱，從而導致 Observable 邏輯的不必要重新執行。 解決方案：使用 @let 使用 @let 聲明變數可確保：✔對 Observable 的單個訂閱 。 ```typescript= @let total = total$ | async; <div>Cart Total: {{ total }}</div> <div>Final Amount: {{ total }}</div> ``` @let 指令使在 Angular 中處理異步數據更加高效，提高性能和可讀性 ## 4. 使用 NgOptimizedImage 提高圖像檔載入速度 圖像通常是網頁上佔loading最重的資源，會影響載入時間和整體回應能力。 未優化的大圖檔會降低網頁速度，從而導致用戶體驗不佳，並可能讓使用者就直接離開網站。 為了解決這個問題，Angular 提供了 NgOptimizedImage，這是一個優化圖檔載入的方法。 ### 第 1 步：安裝和導入 NgOptimizedImage 首先，你需要將 NgOptimizedImage 導入到你的 Angular 專案中。 ```typescript= import { NgOptimizedImage } from '@angular/common'; ... imports: [ NgOptimizedImage, // other imports ] ... ``` import後就可以在component裡使用 NgOptimizedImage ### 第 2 步：將 src 替換為 ngSrc 使用 ngSrc，而不是在 <img> 標籤中使用HTML的 src 屬性： ```html <img ngSrc="cat.jpg"> ``` ngSrc 會自動優化圖像載入。 確保不同螢幕尺寸的最佳性能。 ### NgOptimizedImage 如何提高性能 #### 1. 優先載入的重要圖像 對於最重要的圖片 （例如，banner），請使用 priority 屬性： ```html <img ngSrc="hero.jpg" width="400" height="200" priority> ``` 將圖像標記為 priority 會觸發各種優化，例如設置 fetchpriority=high、loading=eager，以及在伺服器上渲染時生成預載載連結元素。 #### 2. Lazy Loading 延遲載入 使用 ngSrc 時，除非另有指定，否則會自動啟用延遲載入 但是，延遲載入不應用於主要的圖像（在頁面載入時立即可見）。 如果圖像很關鍵，需要立即載入，請設置 loading=“eager”： ```htmlembedded <img ngSrc="logo.jpg" width="150" height="75" loading="eager"> ``` ### 3. Preconnect 連結 瀏覽器可以更早地連接到圖像伺服器，從而減少載入時間。 ```htmlembedded <head> <link rel="preconnect" href="https://my.cdn.origin" /> </head> ``` ### 4. 使用位元 NgOptimizedImage 可以在等待真實圖像載入的同時顯示臨時模糊的圖像，從而提高感知載入速度和用戶體驗。 ```typescript <img ngSrc="product.jpg" width="400" height="300" placeholder> ``` ### 5. 使用資源預載入和預取 默認情況下，瀏覽器按照資源在 HTML 中的顯示順序載入資源。這意味著，如果首先遇到大型資源，它可能會阻止後續可能的關鍵資源（如 CSS）的載入，從而導致頁面的整體載入時間更長。 預載入和預取允許開發人員控制資源載入的時間和優先順序。 預載入非常適合於初始渲染或交互所必需的關鍵資源，例如 CSS 檔、字體或腳本。預載入指示瀏覽器立即載入此類資源 預取對於可能很快需要的資源非常有用，例如使用者可能導航到的下一頁的資產。當您使用預取時，瀏覽器將在空閒時（通常在當前頁面完成載入之後）獲取指定的資源。 ```htmlembedded <! - Preload a stylesheet → <link rel="preload" href="styles.css" as="style"> <! - Prefetch → <link rel="prefetch" href="assets/images/product-detail-hero.jpg" as="image" type="image/jpeg"> ``` # Conclusion 結論 總之 ，優化 Angular 中的性能對於提供快速且回應迅速的用戶體驗至關重要。通過應用我們上面介紹的技術，可以提高應用程式的性能。 >此為翻譯文章 >出處來源 >https://javascript.plainenglish.io/5-simple-angular-performance-hacks-you-need-to-know-503ce065cb09 ###### tage:`angular`