我如何控制角项目的vendor.bundle.js？

Question

首先，我必须说我没有角度专家，但是我遇到了A巨大的vendor.bundle.js达到21MB的问题，这真的很糟糕我猜xD

chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 1.56 MB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 559 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 2.63 MB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 22.8 MB [initial] [rendered]

一旦使用--aot和build-optimizer，它下降到8MB，但我认为它的方式太大了，

我已经完成了webpack分析器，我得到了这些结果 我认为当我检查其他人的网络包分析时，我有很大的编译器和核心js块。

从我从其他主题中得知，它与导入，我们添加到项目中的库有关。

但我不清楚进口和来自哪个档案。它是app.module.ts吗？它是唯一决定并使供应商文件更大的文件吗？或者是否有任何其他文件对供应商文件的大小有贡献？

所以这里是app.module.ts

的所有导入列表

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {AppComponent} from './app.component';
import {ComponentsModule} from 'app/components/components.module';
import {PagesModule} from 'app/pages/pages.module';

import {AuthService} from 'app/services/auth/auth.service';
import {AuthGuardService} from 'app/services/auth/auth-guard.service';
import {UserGuardService} from 'app/services/auth/user-guard.service';
import {AlertService} from 'app/alert.service';
import {routes} from './app.routes';
import {HttpModule} from '@angular/http';
import {UsersService} from './services/users.service';
import {CompaniesService} from './services/companies.service';
import {CustomersService} from './services/customers.service';
import {ProductsService} from 'app/services/products.service';
import {MessageService} from 'primeng/components/common/messageservice';
import {ConfirmationService} from 'primeng/components/common/confirmationservice';
import {GrowlModule} from 'primeng/components/growl/growl';
import {ContactPersonService} from 'app/services/contact-person.service';
import {CompanyDeviceService} from 'app/services/company-device.service';
import {CompanyCredintialService} from 'app/services/company-credintial.service';
import {DepartmentsService} from './services/departments.service';
import {ClubsService} from './services/clubs.service';
import { FilteringPipe } from './pipes/filtering.pipe';

任何想法，建议，评论和帮助将不胜感激 谢谢分享

Answer 1

我也不是棱角分明的专家，我也在学习。我所理解的是，除了使用AOT之外，你可以应用Lazy Load，我不知道这是否可以解决这个问题，但我知道这可以加载更少的模块。 对不起我的英语和我的知识