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

时间:2018-09-15 13:02:37

标签: javascript angular

还是仅包含AppModule中导入的库?我从app.module.ts中删除了所有内容,使用ng serve时vendor.bundle.js的大小为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 {
}

1 个答案:

答案 0 :(得分:1)

  

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

是的,所有归类为供应商库的东西都进入了供应商捆绑包。

  

或者它仅包含在AppModule中导入的库

否,但是您可以找到可以追溯到Angular 2(首次发布)的博客帖子,其中指出 AppModule 控制着供应商捆绑包。从那以后发生了很多变化。

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

在Angular 6中,事情变得更加自动化。

  

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

默认情况下,运行ng server时不会执行摇树优化。在完成 production 构建后,您应该只关心分发包的大小。

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

Webpack捆绑软件分析器

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

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