我正在使用commonjs为JiT转换angular2应用程序,并使用旧方法手动配置aot(两个index.html文件,两个main.ts文件等)到angular4 cli模板(ng new appName) .
2/4之间的cli似乎发生了很大的变化 . 观看了一些youtube视频,用ng cli创建了一个新应用程序,我发现ng build和ng都支持--prod和--aot标志,但生成的webpacks在使用两个不同的标志时大小不同 .
有什么区别
ng build --prod
和
ng build --aot
然后为服务:
ng serve --prod
和
ng serve --aot
似乎prod捆绑比捆绑小,但为什么?
5 回答
来自Bundle size of “ng build --prod” smaller than “build --prod --aot
如果您使用的某些库不支持AoT(并发布UMD软件包),则可能会发生这种情况 . 原因是我们无法优化纯JavaScript的组件 . 不幸的是,这不是我们可以解决的问题 .
这些库需要公开ES2015模块,删除它们的装饰器,并且它们的组件/模块已经被AoT编译 . 我们正在制定库的指南,以支持JIT和AoT编译 .
此外,有时使用某些模板,AoT大小可能比JIT大 . gzip压缩版本应该是另一种方式,因为大多数AoT内容都是反复重复的相同语句 .
尽管捆绑包较大,但引导时间应该明显更快 .
--prod
- 应用uglify和minify来减少捆绑,以及在 生产环境 模式下进行角度工作,从而减少角度编译器提供的运行时警告,同时提高性能 .--aot
- 当我们服务于角度项目时,所有角度文件都下载到浏览器上,它将在浏览器上编译并执行应用程序,但在aot
整个应用程序中传送到浏览器进行预编译,从而提高性能build
- 将捆绑文件并将其放在dist文件夹中,以便我们可以将它们用于服务器上的部署 .serve
- 将在lite服务器上运行应用程序 .--prod打开AOT,你不需要通过两个选项 . 请参阅文档的此部分:https://github.com/angular/angular-cli/wiki/build#--dev-vs---prod-builds
ng build –prod OR ng build
使用--prod标志允许Angular进行提前编译(AOT) .
AOT Ahead of Time Compilation
在浏览器下载并运行该代码之前,Angular Ahead-of-Time(AOT)编译器会在构建阶段将Angular HTML和TypeScript代码转换为高效的JavaScript代码 .
Advantages of AOT:
1-在浏览器上运行之前突出显示编译错误,运行时错误和异常,因此命名为Ahead Of Time(AOT) .
2-如果在项目中使用ng build来构建应用程序,如果您在构建目录中注意到vendor.bundle.js和vendor.bundle.js.map文件的文件大小,那么它将在MBS中下载到浏览器并使我们的应用程序太负载 .
但另一方面,如果您使用标志ng build -prod,您会注意到此文件过度减少到200 KBS意味着大小减少100倍或更多倍 .
因此,我建议您使用--prod标志在构建Angular应用程序时使用AOT .
如果您想进一步阅读和有关此主题的信息,请参阅以下网站:https://angular.io/guide/aot-compiler
--prod使dist文件夹具有部署应用程序所需的一切,这意味着它包含所有js包