---
# System prepended metadata

title: angular效能優化的小技巧
tags: [angular]

---

# 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`