Deferred Components（延迟组件）：拆分 AOT 库文件实现动态下发的底层支持 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Deferred Components：拆分 AOT 库文件实现动态下发的底层支持

大家好，今天我们来深入探讨一个在大型 Angular 应用中至关重要的优化策略：Deferred Components（延迟组件）。尤其是在 AOT (Ahead-of-Time) 编译环境下，通过拆分 AOT 库文件并实现动态下发，可以显著提升应用的初始加载速度和用户体验。

为什么要延迟组件？

在大型 Angular 应用中，往往存在大量的组件和服务。如果不进行优化，这些组件和服务的代码会在应用启动时一次性加载，导致初始加载时间过长，用户体验下降。AOT 编译虽然能显著提升运行时性能，但同时也可能增加初始 bundle 的体积。

延迟组件的核心思想是将一些非关键的、或者用户在特定场景下才会使用的组件，延迟到需要时再加载。这种方式可以有效减小初始 bundle 的体积，加快应用的启动速度。

具体来说，延迟加载可以带来以下好处：

减少初始加载时间: 只加载核心功能所需的代码，提升用户首次访问速度。
降低内存占用: 非必要的组件在初始阶段不加载，减少内存消耗。
提升用户体验: 更快的启动速度意味着更好的用户体验，降低跳出率。
支持按需加载: 根据用户行为动态加载所需组件，提高资源利用率。

AOT 编译与延迟加载的挑战

AOT 编译会将 Angular 应用在构建时就编译成原生 JavaScript 代码，这带来了显著的性能提升。然而，AOT 编译也对延迟加载提出了新的挑战：

严格的类型检查: AOT 编译需要在编译时进行严格的类型检查，这意味着延迟加载的组件也必须在编译时被考虑。
模块依赖关系: AOT 编译需要明确的模块依赖关系，延迟加载的组件如何与主应用建立联系？
代码拆分策略: 如何有效地拆分 AOT 编译生成的库文件，以便实现动态下发？

Deferred Components 的实现策略

要实现 Deferred Components，我们需要解决以下几个关键问题：

组件拆分: 将需要延迟加载的组件及其依赖的代码拆分成独立的 AOT 编译库。
动态加载: 提供一种机制，在运行时动态加载这些库。
模块集成: 将动态加载的组件集成到主应用的 Angular 模块中。

接下来，我们将详细介绍每一步的实现策略，并提供相应的代码示例。

1. 组件拆分：创建 Angular 库

Angular CLI 提供了强大的库创建工具，可以方便地将组件拆分成独立的 Angular 库。

步骤 1: 创建 Angular 工作区（如果还没有）

ng new my-app --create-application=true

步骤 2: 创建 Angular 库

ng generate library my-deferred-component

这会在 projects 目录下创建一个名为 my-deferred-component 的库项目。

步骤 3: 在库中创建组件

cd projects/my-deferred-component/
ng generate component my-lazy-component

步骤 4: 定义库的入口点

库的入口点是 projects/my-deferred-component/src/public-api.ts 文件。我们需要在这个文件中导出需要公开的组件和模块。

// projects/my-deferred-component/src/public-api.ts
export * from './lib/my-lazy-component/my-lazy-component.component';
export * from './lib/my-deferred-component.module';

步骤 5: 创建模块

创建一个模块来声明和导出你的延迟组件。

// projects/my-deferred-component/src/lib/my-deferred-component.module.ts
import { NgModule } from '@angular/core';
import { MyLazyComponentComponent } from './my-lazy-component/my-lazy-component.component';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [
    MyLazyComponentComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    MyLazyComponentComponent
  ]
})
export class MyDeferredComponentModule { }

步骤 6: 构建库

ng build my-deferred-component

这将会在 dist/my-deferred-component 目录下生成 AOT 编译后的库文件。这个目录包含一个 .js 文件（例如 my-deferred-component.umd.js）和相关的 .metadata.json 文件，这些文件包含了库的元数据信息，供 Angular 编译器使用。

2. 动态加载：使用 SystemJS 或类似工具

要动态加载 AOT 编译后的库文件，我们需要使用一个模块加载器。SystemJS 是一个流行的选择，它可以支持多种模块格式，包括 UMD、AMD 和 ES 模块。

步骤 1: 安装 SystemJS

npm install systemjs --save

步骤 2: 配置 SystemJS

在 angular.json 文件中，添加 SystemJS 到 scripts 数组中：

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "node_modules/systemjs/dist/system.js"
            ]
          }
        }
      }
    }
  }
}

步骤 3: 创建动态加载服务

创建一个服务来负责动态加载模块。

// src/app/dynamic-module-loader.service.ts
import { Injectable } from '@angular/core';
import { Compiler, Injector, NgModuleFactory, Type } from '@angular/core';

declare var System: any;

@Injectable({
  providedIn: 'root'
})
export class DynamicModuleLoaderService {

  constructor(
    private compiler: Compiler,
    private injector: Injector
  ) { }

  async loadModule(modulePath: string): Promise<NgModuleFactory<any>> {
    try {
      // 1. Load the module using SystemJS
      const module = await System.import(modulePath);

      // 2. Extract the module class
      const moduleClass = module.MyDeferredComponentModule; // 替换为实际的模块类名

      if (!moduleClass) {
        throw new Error(`Module class not found in ${modulePath}`);
      }

      // 3. Compile the module
      const moduleFactory = await this.compiler.compileModuleAsync(moduleClass);

      return moduleFactory;

    } catch (error) {
      console.error('Error loading module:', error);
      throw error;
    }
  }

  async loadComponent(modulePath: string, componentName:string): Promise<Type<any>>{
    try {
      const module = await System.import(modulePath);
      const component = module[componentName];

      if(!component){
        throw new Error(`Component ${componentName} not found in ${modulePath}`);
      }
      return component;

    } catch (error) {
      console.error('Error loading component:', error);
      throw error;
    }
  }
}

步骤 4: 使用动态加载服务

在需要加载延迟组件的地方，使用 DynamicModuleLoaderService 来加载模块。

// src/app/app.component.ts
import { AfterViewInit, Component, ViewContainerRef } from '@angular/core';
import { DynamicModuleLoaderService } from './dynamic-module-loader.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>My App</h1>
    <button (click)="loadLazyComponent()">Load Lazy Component</button>
    <div #lazyComponentContainer></div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'my-app';

  constructor(
    private dynamicModuleLoaderService: DynamicModuleLoaderService,
    private viewContainerRef: ViewContainerRef
  ) { }

  ngAfterViewInit(): void {
    // Optional: 可以预加载模块
    // this.dynamicModuleLoaderService.loadModule('/dist/my-deferred-component/my-deferred-component.umd.js');
  }

  async loadLazyComponent() {
    try {
      // 1. Load the module
      const moduleFactory = await this.dynamicModuleLoaderService.loadModule('/dist/my-deferred-component/my-deferred-component.umd.js');

      // 2. Create the module instance
      const moduleRef = moduleFactory.create(this.injector);

      // 3. Resolve the component
      const componentFactory = moduleRef.injector.resolveComponentFactory(moduleRef.instance.constructor);

      // 4. Create the component
      const componentRef = this.viewContainerRef.createComponent(componentFactory);

    } catch (error) {
      console.error('Failed to load lazy component', error);
    }
  }
}

注意: /dist/my-deferred-component/my-deferred-component.umd.js 必须是你的库构建输出的实际路径。确保你的服务器能提供这个文件。

另一种加载组件的方式

// src/app/app.component.ts
import { AfterViewInit, Component, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { DynamicModuleLoaderService } from './dynamic-module-loader.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>My App</h1>
    <button (click)="loadLazyComponent()">Load Lazy Component</button>
    <div #lazyComponentContainer></div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'my-app';

  constructor(
    private dynamicModuleLoaderService: DynamicModuleLoaderService,
    private viewContainerRef: ViewContainerRef,
    private componentFactoryResolver: ComponentFactoryResolver
  ) { }

  ngAfterViewInit(): void {
    // Optional: 可以预加载模块
    // this.dynamicModuleLoaderService.loadModule('/dist/my-deferred-component/my-deferred-component.umd.js');
  }

  async loadLazyComponent() {
    try {
      const componentType = await this.dynamicModuleLoaderService.loadComponent('/dist/my-deferred-component/my-deferred-component.umd.js','MyLazyComponentComponent');
      const factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
      this.viewContainerRef.createComponent(factory);

    } catch (error) {
      console.error('Failed to load lazy component', error);
    }
  }
}

在这个方法中， loadComponent 方法接收模块的路径和组件的名称。它使用 System.import 加载模块，然后返回所需的组件类型。 AppComponent 使用 ComponentFactoryResolver 创建组件实例并将其添加到视图中。

3. 模块集成：动态创建模块

上面的例子中，我们动态加载了组件，但是并没有将其集成到 Angular 模块中。如果需要将动态加载的组件集成到 Angular 模块中，可以采用以下策略：

创建动态模块: 在运行时动态创建一个 Angular 模块，并将动态加载的组件添加到该模块的 declarations 数组中。
导入动态模块: 将动态创建的模块导入到主应用的 Angular 模块中。

// src/app/dynamic-module-loader.service.ts
import { Injectable, Compiler, Injector, NgModule, NgModuleRef } from '@angular/core';
import { CommonModule } from '@angular/common';

declare var System: any;

@Injectable({
  providedIn: 'root'
})
export class DynamicModuleLoaderService {

  constructor(
    private compiler: Compiler,
    private injector: Injector
  ) { }

  async loadAndCompileModule(modulePath: string): Promise<NgModuleRef<any>> {
    try {
      // 1. Load the module using SystemJS
      const module = await System.import(modulePath);

      // 2. Extract the module class
      const moduleClass = module.MyDeferredComponentModule; // 替换为实际的模块类名

      if (!moduleClass) {
        throw new Error(`Module class not found in ${modulePath}`);
      }

      // 3. Compile the module
      const moduleFactory = await this.compiler.compileModuleAsync(moduleClass);

       // 4. Create the module instance
       const moduleRef = moduleFactory.create(this.injector);
      return moduleRef;

    } catch (error) {
      console.error('Error loading module:', error);
      throw error;
    }
  }

  async createDynamicModule(component: any): Promise<any> {
      @NgModule({
          imports: [CommonModule],
          declarations: [component],
          exports: [component],
      })
      class RuntimeModule { }

      return RuntimeModule;
  }
}

在 AppComponent 中：

// src/app/app.component.ts
import { AfterViewInit, Component, ViewContainerRef, Injector, NgModuleRef } from '@angular/core';
import { DynamicModuleLoaderService } from './dynamic-module-loader.service';
import { Compiler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `
    <h1>My App</h1>
    <button (click)="loadLazyComponent()">Load Lazy Component</button>
    <div #lazyComponentContainer></div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'my-app';
  moduleRef: NgModuleRef<any> | undefined;

  constructor(
    private dynamicModuleLoaderService: DynamicModuleLoaderService,
    private viewContainerRef: ViewContainerRef,
    private injector: Injector,
    private compiler: Compiler
  ) { }

  ngAfterViewInit(): void {
    // Optional: 可以预加载模块
    // this.dynamicModuleLoaderService.loadModule('/dist/my-deferred-component/my-deferred-component.umd.js');
  }

  async loadLazyComponent() {
    try {

      const moduleRef = await this.dynamicModuleLoaderService.loadAndCompileModule('/dist/my-deferred-component/my-deferred-component.umd.js');
      // 3. Resolve the component
      const componentFactory = moduleRef.injector.resolveComponentFactory(moduleRef.instance.MyLazyComponentComponent); // 替换为实际的组件类名
      // 4. Create the component
       this.viewContainerRef.createComponent(componentFactory);

    } catch (error) {
      console.error('Failed to load lazy component', error);
    }
  }

}

4. 代码拆分策略

代码拆分是 Deferred Components 的关键。我们需要仔细分析应用的代码，找出哪些组件可以延迟加载。

以下是一些常用的代码拆分策略：

按需功能: 将一些用户在特定场景下才会使用的功能组件拆分出来，例如管理后台、报表分析等。
路由懒加载: 将不同的路由模块拆分成独立的 bundle，只有当用户访问该路由时才加载相应的代码。
条件渲染: 将一些只有在特定条件下才会显示的组件拆分出来，例如弹窗、对话框等。

5. 优化技巧

除了上述策略，还可以采用以下优化技巧来进一步提升应用的性能：

预加载: 在用户空闲时预加载一些可能需要的组件，减少后续加载时间。
缓存: 将动态加载的模块缓存起来，避免重复加载。
压缩: 使用 Gzip 或 Brotli 等压缩算法压缩 AOT 编译后的库文件，减小文件体积。

示例代码

以下是一个完整的示例代码，演示了如何使用 Deferred Components 来延迟加载一个组件：

1. 创建 Angular 库 (my-deferred-component):

ng generate library my-deferred-component
cd projects/my-deferred-component/
ng generate component lazy-loaded

2. 修改 my-deferred-component.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyLoadedComponent } from './lazy-loaded/lazy-loaded.component';

@NgModule({
  declarations: [LazyLoadedComponent],
  imports: [CommonModule],
  exports: [LazyLoadedComponent]
})
export class MyDeferredComponentModule { }

3. 修改 public-api.ts:

export * from './lib/lazy-loaded/lazy-loaded.component';
export * from './lib/my-deferred-component.module';

4. 构建库:

ng build my-deferred-component

5. 在主应用中安装 SystemJS:

npm install systemjs --save

6. 修改 angular.json:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "options": {
            "scripts": [
              "node_modules/systemjs/dist/system.js"
            ]
          }
        }
      }
    }
  }
}

7. 创建 DynamicModuleLoaderService:

import { Injectable, Compiler, Injector, NgModuleFactory } from '@angular/core';

declare var System: any;

@Injectable({
  providedIn: 'root'
})
export class DynamicModuleLoaderService {

  constructor(
    private compiler: Compiler,
    private injector: Injector
  ) { }

  async loadModule(modulePath: string): Promise<NgModuleFactory<any>> {
    try {
      const module = await System.import(modulePath);
      const moduleClass = module.MyDeferredComponentModule;

      if (!moduleClass) {
        throw new Error(`Module class not found in ${modulePath}`);
      }

      const moduleFactory = await this.compiler.compileModuleAsync(moduleClass);
      return moduleFactory;

    } catch (error) {
      console.error('Error loading module:', error);
      throw error;
    }
  }
}

8. 修改 app.component.ts:

import { AfterViewInit, Component, ViewContainerRef, Injector } from '@angular/core';
import { DynamicModuleLoaderService } from './dynamic-module-loader.service';

@Component({
  selector: 'app-root',
  template: `
    <h1>My App</h1>
    <button (click)="loadLazyComponent()">Load Lazy Component</button>
    <div #lazyComponentContainer></div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'my-app';

  constructor(
    private dynamicModuleLoaderService: DynamicModuleLoaderService,
    private viewContainerRef: ViewContainerRef,
    private injector: Injector
  ) { }

  ngAfterViewInit(): void { }

  async loadLazyComponent() {
    try {
      const moduleFactory = await this.dynamicModuleLoaderService.loadModule('/dist/my-deferred-component/my-deferred-component.umd.js');
      const moduleRef = moduleFactory.create(this.injector);
      const componentFactory = moduleRef.injector.resolveComponentFactory(moduleRef.instance.constructor);
      this.viewContainerRef.createComponent(componentFactory);
    } catch (error) {
      console.error('Failed to load lazy component', error);
    }
  }
}

9. 修改 app.module.ts:

确保 AppModule 没有导入 MyDeferredComponentModule。

10. 运行应用:

ng serve

点击 "Load Lazy Component" 按钮，就可以动态加载 LazyLoadedComponent 了。

常见问题与注意事项

CORS 问题: 动态加载的库文件可能存在跨域问题，需要在服务器端配置 CORS 策略。
版本兼容性: 确保动态加载的库文件与主应用的版本兼容。
错误处理: 在动态加载过程中，需要处理各种可能出现的错误，例如文件不存在、模块加载失败等。
性能监控: 监控动态加载的性能，例如加载时间、内存占用等，以便进行优化。

问题	解决方案
CORS 跨域问题	配置服务器 CORS 策略，允许跨域访问 AOT 库文件。
版本不兼容	确保动态加载的库文件与主应用使用相同或兼容的 Angular 版本。
模块加载失败	检查库文件路径是否正确，确保服务器能够提供该文件。同时，检查 SystemJS 配置是否正确。
类型定义缺失	动态加载的模块可能缺少类型定义，导致编译错误。可以使用 `declare module` 来声明模块的类型。
初始加载时间增加	错误的代码拆分策略可能导致初始加载时间增加。需要仔细分析应用的代码，找出合适的拆分点。
组件集成到现有模块中	使用 `DynamicModuleLoaderService` 创建动态模块，并将动态加载的组件添加到该模块的 `declarations` 数组中，然后将动态创建的模块导入到主应用的 Angular 模块中。

延迟组件的核心技术和应用场景

Deferred Components 的核心技术在于AOT 编译、模块化设计和动态模块加载。 AOT 编译保证了性能，模块化设计使得代码拆分成为可能，而动态模块加载则实现了按需加载。

Deferred Components 在以下场景中特别有用：

大型企业应用: 大型企业应用往往包含大量的功能模块，使用 Deferred Components 可以显著提升应用的启动速度。
复杂的用户界面: 复杂的 UI 界面可能包含大量的组件，使用 Deferred Components 可以减少初始 bundle 的体积。
移动应用: 移动应用的启动速度对用户体验至关重要，使用 Deferred Components 可以加快应用的启动速度，提升用户满意度。

未来发展趋势

Deferred Components 在未来可能会朝着以下方向发展：

更智能的代码拆分: 通过 AI 技术自动分析应用的代码，找出最佳的代码拆分策略。
更高效的动态加载: 使用更先进的模块加载器，提升动态加载的性能。
更完善的工具支持: Angular CLI 提供更完善的工具支持，简化 Deferred Components 的开发流程。

通过深入理解 Deferred Components 的原理和实现策略，我们可以更好地优化 Angular 应用的性能，提升用户体验。希望今天的分享对大家有所帮助！

对 Deferred Components 的一些思考

延迟组件是一种强大的优化技术，可以显著提升大型 Angular 应用的性能。它允许我们按需加载组件，减少初始 bundle 的体积，从而加快应用的启动速度。通过合理地进行代码拆分，动态加载组件，并使用适当的优化技巧，我们可以构建出更加高效和用户友好的 Angular 应用。