[Tree Shakeable Providers and Services in Angular](https://findanyanswer.com/open-detail/123157A7)

Angular 最近推出了一項新功能，Tree Shakeable Providers。 Tree Shakeable Providers 是一種定義服務和其他東西的方式，以一種可以提高 Angular 應用程式效能的方式被 Angular 的依賴注入系統使用。

首先，在我們深入挖掘之前，讓我們先定義一下搖樹。搖樹是構建過程中的一個步驟，它從程式碼庫中刪除未使用的程式碼。刪除未使用的程式碼可以被認為是“搖樹”，或者您可以想象一棵樹的物理搖晃和剩餘的枯葉從樹上掉下來。通過使用搖樹，我們可以確保我們的應用程式只包含我們的應用程式執行所需的程式碼。

例如，假設我們有一個實用程式庫，其中包含函式 a()、b() 和 c()。在我們的應用程式中，我們匯入並使用函式 a () 和 c () 但不使用 b ()。我們希望 b() 的程式碼不會被捆綁並部署給我們的使用者。搖樹是從我們傳送到使用者瀏覽器的已部署生產程式碼中刪除函式 b() 的機制。

為什麼過去版本的 Angular 中，服務已經不能被搖樹優化？這其實又回到了我們如何在 Angular 的早期版本中註冊 Service 的問題。讓我們看一個示例，說明我們如何在以前的 Angular 版本中註冊一個用於依賴注入的服務。

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { SharedService } from './shared.service';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [SharedService]
})
export class AppModule {}
```

如您所見，我們匯入了服務並將其新增到我們的 Angular AppModule。 這會將服務註冊到 Angular 的依賴注入系統。 每當元件請求使用此服務時，Angular 的 DI 將確保建立 Service 及其任何依賴項並將其傳遞給元件的建構函式。

此註冊系統的問題在於，構建工具和編譯器很難確定我們的應用程式中是否使用了此程式碼。

搖樹系統刪除程式碼的主要方式之一是檢視我們定義的匯入路徑。 如果類或函式未匯入，則不會包含在我們提供給使用者的生產程式碼包中。如果它是匯入的，則搖樹器假定它正在應用程式中使用。在我們上面的示例中，我們在 AppModule 中匯入和引用我們的服務，導致顯式依賴項不能被搖樹優化掉。

# Angular Tree Shaking Providers

使用 Tree Shaking Providers (TSP)，我們可以使用不同的機制來註冊我們的服務。 使用這種新的 TSP 機制將提供搖樹效能和依賴注入的好處。 我們有一個帶有特定程式碼的演示應用程式來演示我們如何註冊這些服務的不同效能特徵。 讓我們來看看新的 TSP 語法是什麼樣的。

```typescript
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  constructor() {}
}
```

在@Injectable 裝飾器中，我們有一個名為providedIn 的新屬性。有了這個屬性，我們可以告訴 Angular 將我們的服務註冊到哪個模組，而不必匯入模組並將其註冊到 NgModule 的提供者。也就是說，不需要像舊版本的 Angular 那樣，在 AppModule 裡顯式 import 服務，並新增到 NgModule 的 providers 陣列裡。

預設情況下，此語法將其註冊到根注入器，這將使我們的服務成為應用程式範圍的單例。 對於大多數用例，根提供程式是合理的預設值。 如果您仍然需要控制服務例項的數量，Angular 模組和元件上的常規提供程式 API 仍然可用。

使用這個新 API，您可以看到，由於我們不必將服務匯入 NgModule 進行註冊，因此我們沒有明確依賴。 因為沒有 import 語句，構建工具可以確保該服務僅在元件使用時才捆綁在我們的應用程式中。 讓我們看一個示例應用程式。

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { Shared3Service } from './shared3.service';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HelloComponent },
      {
        path: 'feature-1',
        loadChildren: () => import('./feature-1/feature-1.module').then(m => m.Feature1Module)
      },
      {
        path: 'feature-2',
        loadChildren: () => import('./feature-2/feature-2.module').then(m => m.Feature2Module) }
      }
    ])
  ],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
  providers: [Shared3Service]
})
export class AppModule {}
```

在這個示例應用程式中，我們有三個元件； 兩個是延遲載入的模組，而一個是我們的著陸主頁元件。 我們還將在應用程式中使用三種不同的服務。 讓我們從第一個服務開始，看看它是如何使用的。

```typescript
import { Injectable } from '@angular/core';

console.log('SharedService bundled because two components use it');

@Injectable({
  providedIn: 'root'
})
export class SharedService {
  constructor() {
    console.log('SharedService instantiated');
  }
}
```

我們的第一個服務使用 tree shakable providers API。 我們在每個延遲載入的功能模組中匯入此服務兩次，如下所示。

```typescript
import { Component, OnInit } from '@angular/core';
import { SharedService } from './../shared.service';

@Component({
  selector: 'app-feature-1',
  templateUrl: './feature-1.component.html',
  styleUrls: ['./feature-1.component.css']
})
export class Feature1Component implements OnInit {
  constructor(private sharedService: SharedService) {}
  ngOnInit() {}
}
```

因為我們的兩個元件中都使用了服務 1，所以程式碼被載入並捆綁到我們的應用程式中。 如果我們檢查控制檯，我們會看到以下訊息：

> SharedService bundled because two components use it

第二個服務：

```typescript
import { Injectable } from '@angular/core';

console.log('Shared2Service is not bundled because it not used');

@Injectable({
  providedIn: 'root'
})
export class Shared2Service {
  constructor() {}
}
```

如果我們檢查控制檯，我們不會看到日誌訊息。 這是因為我們的功能模組或元件中均未使用此服務。 由於它沒有被使用，所以沒有捆綁和載入程式碼。

最後，我們類似於前兩個服務的第三個服務如下所示：

```typescript
import { Injectable } from '@angular/core';

console.log('Shared3Service bundled even though not used');

@Injectable()
export class Shared3Service {
  constructor() {}
}
```

console 資訊：

> Shared3Service bundled even though not used

因為 Shared3Service 是使用較舊的提供程式 API 註冊的，所以由於需要註冊的 import 語句，它會建立顯式依賴項。即使沒有元件使用它，import 語句也會導致構建系統包含並載入此程式碼。

在這三個服務之間，我們可以看到搖樹系統如何在我們的應用程式中包含或刪除程式碼的特徵。使用 TSP API，我們的服務仍然是單例的，即使對於我們示例中的延遲載入模組中使用的服務。如果我們載入示例應用程式，我們會注意到，如果我們在功能一和功能二之間路由，則 SharedService 中的控制檯日誌只會被呼叫一次。一旦請求模組，Angular 將例項化並確保該例項在應用程式的剩餘生命週期中使用。

Angular Tree Shakeable Providers 為我們的應用程式提供了更好的效能，並減少了建立可注入服務所需的樣板程式碼量。

Angular 應用裡的搖樹優化 - tree shaking

相關文章