Angular2 (CLI) 树摇动删除动态创建的 NgModule

typescript

# Angular2（CLI）中的树摇动：删除动态创建的 NgModule

Angular是一种流行的前端框架，其强大的特性使得开发者能够创建模块化、可维护的Web应用。在Angular中，NgModule（NgModule是Angular中的模块化机制）的概念非常重要。然而，在大型应用中，可能会动态创建NgModule，这时候就需要注意使用树摇动（Tree Shaking）来删除未使用的代码，以提高应用的性能。

## 什么是树摇动？

树摇动是指在构建应用时，通过静态代码分析来确定哪些代码块实际上没有被使用，然后将其从最终的构建结果中删除。这个过程可以帮助减小应用的体积，加快加载速度。

## 删除动态创建的 NgModule

在一些情况下，我们可能需要动态创建NgModule。例如，根据用户的角色或权限，我们可能需要在运行时加载一些模块。但是，这也可能导致一些未使用的代码被包含在最终的构建中，增加了应用的体积。

下面，让我们通过一个简单的案例来演示如何使用Angular CLI中的树摇动来删除动态创建的NgModule中的未使用代码。

案例代码

假设我们有一个动态创建NgModule的服务，代码如下：

typescript
// dynamic-module.service.ts
import { Injectable, Compiler, Injector, NgModuleRef, Type, NgModuleFactory } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class DynamicModuleService {
  constructor(private compiler: Compiler, private injector: Injector) {}
  loadModule(moduleType: Type<any>): Promise<NgModuleRef<any>> {
    const ngModuleFactory = this.compiler.compileModuleSync(moduleType);
    return ngModuleFactory.create(this.injector);
  }
}

上述代码中，DynamicModuleService 提供了一个 loadModule 方法，用于动态编译和创建NgModule。

现在，让我们创建一个动态模块，它包含一个未被使用的组件：

typescript
// dynamic-feature.module.ts
import { NgModule } from '@angular/core';
import { DynamicComponent } from './dynamic.component';
@NgModule({
  declarations: [DynamicComponent],
  exports: [DynamicComponent],
})
export class DynamicFeatureModule {}

typescript
// dynamic.component.ts
import { Component } from '@angular/core';
@Component({
  selector: 'app-dynamic',
  template: '
Dynamic Component
',
})
export class DynamicComponent {}

树摇动删除未使用的代码

在使用Angular CLI构建应用时，可以通过在 tsconfig.JSon 文件中设置 "angularCompilerOptions" 下的 "fullTemplateTypeCheck" 为 true 来启用完整的模板类型检查，这对树摇动是必要的。

JSon
// tsconfig.JSon
{
  "compilerOptions": {
    // other options...
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true
  }
}

接下来，在应用的根模块中，使用 DynamicModuleService 加载动态模块并动态创建其中的组件：

typescript
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DynamicModuleService } from './dynamic-module.service';
import { DynamicFeatureModule } from './dynamic-feature.module';
@NgModule({
  imports: [BrowserModule],
  providers: [DynamicModuleService],
  bootstrap: [],
})
export class AppModule {
  constructor(private dynamicModuleService: DynamicModuleService) {
    this.dynamicModuleService.loadModule(DynamicFeatureModule);
  }
}

通过上述设置，Angular CLI 将能够在构建时检测到 DynamicComponent 组件未被使用，并将其从最终的构建中删除，从而实现树摇动的效果。

##

通过以上案例，我们了解了如何在Angular2（CLI）中使用树摇动来删除动态创建的NgModule中的未使用代码。通过这种方式，我们可以优化应用的性能，减小构建后的文件体积，提高用户体验。在开发大型应用时，合理使用树摇动是优化策略中的重要一环。希望这篇文章能够帮助你更好地理解和使用Angular中的树摇动机制。