Angular （全新角度项目）当我将模块导入到独立功能模块时，main.js文件的大小会增加

我有一个新的角度与3个模块的项目<代码>应用模块，

核心模块

和

测试模块

CoreModule

和

TestModule

与

AppModule

没有任何关联或导入

CoreModule

延迟加载

TestModule

问题：

如果我将任何模块（如

HttpClientModule

等）导入

TestModule

，则

main.js

文件的大小会增加。我的理解是，只有

AppModule

的内容应该影响

main.js

的大小，而不是任何功能模块（

TestModule

）

在

TestModule

中，如果您在

ng build--prod之后注释模块导入，
main.js
size=182kb（=51kb gzip）

在
TestModule
中，如果取消注释模块导入，
ng build--prod

代码：

AppModule

import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {BrowserModule} from '@angular/platform-browser';

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

import {Route, RouterModule} from '@angular/router';
import {CoreWrapperComponent} from './core-wrapper.component';
import {NgModule} from '@angular/core';


const routes: Route[] = [
  {

    path: '',
    component: CoreWrapperComponent,
    children: [{
      path: 'test', loadChildren: './test.module#TestModule', canLoad: []
    }],
  },
  {path: '', redirectTo: `core/viewbots/test`, pathMatch: 'full'},
];

declare let areReducersRegistered;

@NgModule({
  declarations: [CoreWrapperComponent],
  entryComponents: [],
  imports: [
    RouterModule.forChild(routes),
  ],
  providers: []
})
export class CoreModule {
}

import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
import {CommonModule} from '@angular/common';
import {HttpClientModule} from '@angular/common/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

const routes: Route[] = [];

@NgModule({
  declarations: [],
  entryComponents: [],
  imports: [
    CommonModule,

    /*
    * If you comment following Module main.js size = 182kb (= 51kb gzip)
    * If you uncomment following Module main.js size = 195kb (= 54.6kb gzip)
    *
    * Since TestModule is not imported in AppModule in any way, adding or removing modules
    * in TestModule should have no impact on main.js file size
    * */
    // RouterModule,
    // HttpClientModule,
    // FormsModule,
    // ReactiveFormsModule,
  ],
})
export class TestModule {
}

核心模块

import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {BrowserModule} from '@angular/platform-browser';

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

import {Route, RouterModule} from '@angular/router';
import {CoreWrapperComponent} from './core-wrapper.component';
import {NgModule} from '@angular/core';


const routes: Route[] = [
  {

    path: '',
    component: CoreWrapperComponent,
    children: [{
      path: 'test', loadChildren: './test.module#TestModule', canLoad: []
    }],
  },
  {path: '', redirectTo: `core/viewbots/test`, pathMatch: 'full'},
];

declare let areReducersRegistered;

@NgModule({
  declarations: [CoreWrapperComponent],
  entryComponents: [],
  imports: [
    RouterModule.forChild(routes),
  ],
  providers: []
})
export class CoreModule {
}

import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
import {CommonModule} from '@angular/common';
import {HttpClientModule} from '@angular/common/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

const routes: Route[] = [];

@NgModule({
  declarations: [],
  entryComponents: [],
  imports: [
    CommonModule,

    /*
    * If you comment following Module main.js size = 182kb (= 51kb gzip)
    * If you uncomment following Module main.js size = 195kb (= 54.6kb gzip)
    *
    * Since TestModule is not imported in AppModule in any way, adding or removing modules
    * in TestModule should have no impact on main.js file size
    * */
    // RouterModule,
    // HttpClientModule,
    // FormsModule,
    // ReactiveFormsModule,
  ],
})
export class TestModule {
}

测试模块

import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {BrowserModule} from '@angular/platform-browser';

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

import {Route, RouterModule} from '@angular/router';
import {CoreWrapperComponent} from './core-wrapper.component';
import {NgModule} from '@angular/core';


const routes: Route[] = [
  {

    path: '',
    component: CoreWrapperComponent,
    children: [{
      path: 'test', loadChildren: './test.module#TestModule', canLoad: []
    }],
  },
  {path: '', redirectTo: `core/viewbots/test`, pathMatch: 'full'},
];

declare let areReducersRegistered;

@NgModule({
  declarations: [CoreWrapperComponent],
  entryComponents: [],
  imports: [
    RouterModule.forChild(routes),
  ],
  providers: []
})
export class CoreModule {
}

import {NgModule} from '@angular/core';
import {Route, RouterModule} from '@angular/router';
import {CommonModule} from '@angular/common';
import {HttpClientModule} from '@angular/common/http';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';

const routes: Route[] = [];

@NgModule({
  declarations: [],
  entryComponents: [],
  imports: [
    CommonModule,

    /*
    * If you comment following Module main.js size = 182kb (= 51kb gzip)
    * If you uncomment following Module main.js size = 195kb (= 54.6kb gzip)
    *
    * Since TestModule is not imported in AppModule in any way, adding or removing modules
    * in TestModule should have no impact on main.js file size
    * */
    // RouterModule,
    // HttpClientModule,
    // FormsModule,
    // ReactiveFormsModule,
  ],
})
export class TestModule {
}

嗯，你有没有和Webpack Bundle Analyzer联系过？我在这里得到了答案：嗯，你有没有和Webpack Bundle Analyzer联系过？我在这里得到了答案：