Angular AOT 编译的应用程序没有像预期的那样摇树

Question

我有一个模块 (MyCommonModule)，其中包含我计划在不同 angular 应用程序之间共享的通用组件、服务等。

这是一个简单应用的示例，它仅导入 MyCommonModule（但尚未在 AppComponent 中引用任何内容）：

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

import { AppComponent } from './app.component';
import { MyCommonModule } from "../common";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        MyCommonModule.forRoot()
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

MyCommonModule 定义如下：

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';

// Components
import { SomeComponent } from "./components/some.component";
export * from "./components/some.component";

// Directives
import { SomeDirective } from "./directives/some.directive";
export * from "./directives/some.directive";

// Services
import { SomeService } from "./services/some.service";
export * from "./services/some.service";

// Models
export * from "./models/some.model";

@NgModule({
    imports: [
        CommonModule
    ],
    declarations: [
        SomeComponent,
        SomeDirective
    ],
    providers: [],
    exports: [
        SomeComponent,
        SomeDirective
    ]
})
export class MyCommonModule {
    public static forRoot(): ModuleWithProviders {
        return {
            ngModule: MyCommonModule,
            providers: [
                SomeService
            ]
        };
    }
}

当我运行 ng build --environment=prod --target=production 我得到一个 AOT:d 的版本。如果我使用 source-map-explorer 分析输出，我可以看到生成的 main.*.bundle.js 和 vendor.*.bundle.js 包含 MyCommonModule 中的所有服务和组件（及其引用），即使我没有在我的应用程序中使用它中的任何一个。

这是预期的行为吗？ angular cli 应用是否启用了 tree shaking？

Answer 1

"tree shaker" 遍历依赖图，从上到下，像树上的枯叶一样摇掉未使用的代码。如果您的 AppModule 导入 MyCommonModule，"tree shaker" 无法知道您是否实际使用它（根据 JavaScript，您使用该代码）

Answer 2

解决问题后，另外尝试以下操作：

ng build -prod --build-optimizer=true

（还不能添加评论，但这可能会有帮助）

Angular AOT 编译的应用程序没有像预期的那样摇树

Angular AOT compiled app not tree shaking as expected

angular-cli

angular2-aot

tree-shaking

angular

angular-aot