vendor.bundle.js 是否包含在延迟加载模块中导入的库?

Question

或者它只包含 AppModule 中导入的库？我从app.module.ts中删除了所有内容，vendor.bundle.js的大小在使用ng serve时为9.5MB，使用ng build时为3.22MB

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule {
}

Answer 1

vendor.bundle.js 是否包含导入在延迟加载模块中的库？

是的，任何归类为供应商库的内容都会进入供应商捆绑包。

或者它只包含 AppModule 中导入的库

不，但您可以找到可追溯到 Angular 2(首次发布时(的博客文章，其中状态 AppModule控制着供应商捆绑包。从那以后，很多事情都发生了变化。

在 Angular 5 中，您可以创建一个src/vendor.ts文件，允许您导入要放入供应商捆绑包中的模块。在 Angular 6 中删除了对此功能的支持(至少我认为是这样，但我从未使用过它(。

在 Angular 6 中，事情更加自动化。

vendor.bundle.js 的大小在使用 ng serve 时为 9.5MB，使用 ng build 时为 3.22MB。

默认情况下，运行ng server时不会执行树摇动和优化。在执行生产构建后，您应该只关注捆绑包大小。

此外，不应将ng server用作生产 Web 服务器。

Webpack bundle Analyzer

我建议您尝试一下捆绑分析器。这是检查捆绑包以查看内部内容并比较开发和生产版本之间的差异的最佳方式。

https://www.npmjs.com/package/webpack-bundle-analyzer