Ivy 是 Angular 9 引入的新渲染引擎，显著提升了应用性能和开发效率。以下是关键优化点：

1. 变更检测优化 🔄

Ivy 的差异更新算法比旧版本更高效，减少不必要的 DOM 操作。

  • 使用 OnPush 作为变更检测策略： 
    @Component({
  selector: 'app-example',
  template: `<div>{{ data }}</div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
  • 图片：
    Angular_Change_Detection

2. 懒加载（Lazy Loading） 📁

通过 NgModule 的懒加载机制，按需加载模块，降低初始加载时间。

  • 示例： 
    const routes: Routes = [
  { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }
];
  • 图片：
    Lazy_loading_Angular

3. 服务优化 💡

  • 使用 providedIn: 'root' 避免重复创建服务实例。
  • 图片：
    Angular_Service_Optimization

4. Tree Shaking 🌳

Ivy 的结构更易被 Webpack 等工具优化，减少打包体积。

  • 图片：
    Tree_shaking_Angular

5. 进一步学习 📚

图片：

Angular_Ivy_Performance