Angular Ivy是Angular 9及更高版本中引入的默認渲染引擎，它取代了以前的View Engine。Ivy的目標是提高Angular的性能、減少包大小和提高開發者的生產力。

1. AOT編譯的改進：

在Ivy中，Angular使用了更早的AOT（Ahead-of-Time）編譯，這意味著在構建時就將模板轉換為純JavaScript，減少了運行時的編譯開銷。在舊的View Engine中，AOT編譯會產生多個大的元數據文件，而在Ivy中，這些元數據被直接內聯在組件類中，減少了加載時間。

2. 更小的輸出大小：

Ivy生成的代碼更小，因為它的元數據格式更緊湊，而且它支持懶加載模塊的更細粒度的拆分。這意味著用戶只需下載他們實際使用的代碼，而不是整個應用。

3. 更快的啟動時間：

由于Ivy的元數據結構和更有效的編譯過程，應用啟動更快。Ivy使用了新的元數據格式，減少了解析和初始化的時間。

4. 更好的類型檢查和錯誤報告：

Ivy在構建時提供了更好的類型檢查，這意味著在編譯階段就能捕獲更多錯誤，而不是在運行時。這提高了開發效率并減少了潛在的運行時問題。

5. 更容易的庫開發：

Ivy允許庫作者直接在他們的庫中使用Ivy編譯，無需額外的配置。這簡化了庫的創建和維護，同時也使庫的使用者受益。

6. 動態組件的優化：

Ivy對動態組件的支持也進行了優化，降低了動態組件創建和銷毀的開銷，這對于頻繁創建和銷毀組件的應用來說是一個顯著的性能提升。

7. 更強的DI（依賴注入）：

Ivy的依賴注入系統更加高效，減少了查找依賴的開銷，尤其是在大型應用中。

8. 更好的樹搖優化：

Tree-shaking是現代JavaScript打包工具的一個特性，用于刪除未使用的代碼。Ivy的設計使得tree-shaking更容易和有效，進一步減小了最終的包大小。

要啟用Ivy，你通常不需要在Angular 9及更高版本中做任何特殊配置，因為它已經是默認選項。然而，如果你需要手動啟用或禁用，可以在angular.json配置文件中設置"enableIvy"為true或false。

代碼示例（在Angular 9+的tsconfig.app.json文件中）：

{"compilerOptions": {"enableIvy": true}
}

9. 模塊與指令的局部作用域

Ivy 引入了模塊和指令的局部作用域概念，這意味著組件可以聲明自己的局部指令或管道，而不會污染全局命名空間。這不僅減少了全局范圍的潛在沖突，還使得代碼組織更加清晰，便于維護。

10. 改進的變更檢測

Ivy 對變更檢測機制進行了優化，能夠更精準地追蹤哪些組件需要被檢查更新。它引入了“增量構建器”（Incremental DOM Builder），該機制在構建DOM時，僅更新那些數據確實發生變化的部分，從而減少了不必要的DOM操作，提升了性能。

11. 持續的性能優化

Angular團隊持續對Ivy進行優化，比如通過減少運行時代碼量、改進數據綁定機制等方式，進一步提升應用的啟動速度和運行時性能。

讓我們看一個簡單的Angular組件例子，展示如何利用Ivy的特性：

// app.component.ts
import { Component } from '@angular/core';@Component({selector: 'app-root',template: `<h1>{{ title }}</h1><button (click)="changeTitle()">Change Title</button>`,styles: []
})
export class AppComponent {title = 'Angular Ivy App';changeTitle() {this.title = 'New Title';}
}

在上面代碼中，Ivy會通過AOT編譯將模板轉換為高效的JavaScript代碼，減少運行時解析負擔。同時，變更檢測機制會精確監控title屬性的變化，僅當點擊按鈕觸發changeTitle()方法，修改了title的值時，才會觸發視圖的更新。

12. Tree-shakable服務與依賴

在Ivy中，服務也可以被tree-shake，意味著如果你的應用沒有使用某個服務，那么這個服務相關的代碼就不會被打包進最終的產物中。這通過在服務提供者上使用@Injectable({ providedIn: ‘root’ })裝飾器實現，它指示Angular在根模塊中提供此服務，同時允許tree-shaker識別未被引用的服務。

13. 懶加載與預加載策略

Ivy 支持更精細的懶加載和預加載策略，這在大型應用中尤為重要。懶加載允許應用按需加載模塊，即只有當用戶導航到特定路由時，相關的模塊才會被加載進來，這有助于減少初始加載時間。預加載則是在后臺預先加載可能即將用到的模塊，以提升用戶體驗。

在Angular中，通過Angular Router配置懶加載非常簡單：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutModule } from './about/about.module'; // 假設AboutModule是一個懶加載模塊const routes: Routes = [{ path: '', component: HomeComponent },{ path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }, // 懶加載關于頁面模塊
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }

預加載策略可以在Angular Router的配置中通過preloadingStrategy選項指定，使用PreloadAllModules策略可以自動預加載所有懶加載模塊：

// main.ts 或 app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, PreloadAllModules } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';@NgModule({declarations: [AppComponent],imports: [BrowserModule,RouterModule.forRoot(AppRoutingModule.routes, { preloadingStrategy: PreloadAllModules }) // 預加載所有模塊],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

14. Angular Elements

Ivy 支持Angular Elements，這是一種將Angular組件包裝為Web Components的技術，使得Angular組件可以在任何支持Web Components標準的平臺上運行，包括非Angular應用。這極大地增強了組件的可復用性和跨框架兼容性。

15. 性能監控與診斷

Angular提供了強大的開發者工具，如Angular DevTools，它可以幫助開發者深入了解應用的變更檢測、內存分配、渲染性能等，這對于診斷和優化應用性能至關重要。Ivy的改進使得這些工具能夠提供更準確和詳細的性能數據。

16. 國際化（i18n）與本地化

Ivy對國際化（Internationalization, i18n）的支持也有所增強，提供了更靈活的標記和提取機制，使得多語言應用的開發和維護更加高效。開發者可以使用ng xi18n命令來提取翻譯標簽，并使用相應的工具或服務來完成翻譯。

2500G計算機入門到高級架構師開發資料超級大禮包免費送！