Скомпилированное приложение Angular AOT не дрожит, как ожидалось

У меня есть модуль (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?


person Joel    schedule 27.06.2017    source источник
comment
Однако вы используете его в своем приложении - вы импортируете MyCommonModule в AppModule, а MyCommonModule импортируете все свои службы и компоненты. Если я правильно понимаю, встряхивание дерева работает на уровне модуля ES6, а не на уровне Angular - если вы куда-то импортируете модуль, его не вытряхнут. Будет удалено только то, что не импортировано в ваш код.   -  person Joe Clay    schedule 27.06.2017


Ответы (2)


«tree shaker» обходит граф зависимостей сверху вниз и вытряхивает неиспользуемый код, как мертвые листья на дереве. Если ваш AppModule импортирует MyCommonModule, «шейкер дерева» не может знать, действительно ли вы его используете (с точки зрения JavaScript вы используете этот код)

person Ariel Henryson    schedule 27.06.2017

Кроме того, после решения проблемы попробуйте следующее:

ng build -prod --build-optimizer=true

(пока не могу добавлять комментарии, но это может быть полезно)

person dsla    schedule 26.09.2017