Question

我正在为 JiT 使用 commonjs 转换 Angular2 应用程序以及手动配置aot的旧方式（两个index.html文件，两个main.ts文件等）到angular4 cli模板（ng new appName）。

2/4之间的cli似乎发生了很大的变化。观看了一些youtube视频，使用ng cli创建了一个新的应用，我发现ng build和ng serve都支持--prod和--aot标记，但生成的网络包是使用两个不同的标志时大小不同。

之间有什么区别

ng build --prod

和

ng build --aot

然后发球：

ng serve --prod

和

ng serve --aot

似乎prod捆绑比aot捆绑小，但为什么？

Answer 1

--prod - 应用uglify和minify来减少捆绑，以及在生产模式下进行角度工作，从而减少角度编译器提供的运行时警告，同时提高性能。

--aot - 通常当我们提供角度项目时，所有角度文件都会在浏览器上下载，它将在浏览器上编译和执行应用程序，但在aot传递给浏览器的整个应用程序都是预编译的提高性能

build - 将捆绑文件并将其放在dist文件夹中，以便我们可以在服务器上进行部署。

serve - 将在lite服务器上运行应用程序。

Answer 2

来自Bundle size of “ng build --prod” smaller than “build --prod --aot

如果您使用的某些库不支持AoT（并发布UMD捆绑包），则可能会发生这种情况。原因是我们无法优化纯JavaScript的组件。不幸的是，这不是我们可以解决的问题。

这些库需要公开ES2015模块，去掉它们的装饰器，并且它们的组件/模块已经被AoT编译。我们正在制定库的指南，以支持JIT和AoT编译。

此外，有时使用某些模板，AoT大小可能比JIT大。 gzip压缩版本应该是另一种方式，因为大多数AoT内容是反复重复的相同语句。

虽然捆绑包较大，但引导时间应该明显加快。

Answer 3

- prod打开AOT，你不需要传递这两个选项。请参阅文档的此部分：https://github.com/angular/angular-cli/wiki/build#--dev-vs---prod-builds

Answer 4

ng build -prod OR ng build

使用--prod标志允许Angular进行时间编译（AOT）。

AOT提前编译

Angular Ahead of Time（AOT）编译器在浏览器下载并运行该代码之前，在构建阶段将Angular HTML和TypeScript代码转换为高效的JavaScript代码。

AOT的优点：

1-在浏览器上运行之前突出显示编译错误，运行时错误和异常，因此命名为Ahead Of Time（AOT）。

2-如果您注意到 vendor.bundle.js 和 vendor.bundle.js.map 您的构建目录中的文件将在MBS中下载到浏览器并使我们的应用程序过载。

但另一方面，如果您使用标志ng build –prod，您会注意到此文件过度减少到200 KBS意味着减少100倍或更多倍。

因此，我建议您使用--prod标志在构建Angular应用程序时使用AOT。

如果您想进一步阅读有关此主题的信息，请参阅以下网站：https://angular.io/guide/aot-compiler

AngularCli构建和服务器--aot vs --prod

4 个答案: