Angular Cli 构建和服务 --aot 与 --prod答案

【问题标题】：AngularCli build and server --aot vs --prodAngular Cli 构建和服务 --aot 与 --prod
【发布时间】：2017-07-14 17:11:33
【问题描述】：

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

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

有什么区别

ng build --prod

和

ng build --aot

然后发球：

ng serve --prod

和

ng serve --aot

prod 包似乎比 aot 包小，但为什么呢？

【问题讨论】：

--prod 是 prod build（这会更小）--aot 是提前编译。
是的，但是 prod 做了什么没有封装在 --aot 中？
stackoverflow.com/questions/40205903/…
prod 将有更少的调试日志，它可能会做更多的检查。我认为当您绑定到 functions() 时，非 prod build 甚至会进行双重更改检查，以查看它是否能够正确检测到更改。
我会加载更快加载我的网站。在网站 gtmetrix 排名是 37。我应该使用哪种方法？

【解决方案1】：

--prod- 应用 uglify 和 minify 来减少捆绑包，并使 Angular 在生产模式下工作，从而减少 Angular 编译器给出的运行时警告并提高性能。

--aot- 通常当我们提供 Angular 项目时，所有 Angular 文件都下载到浏览器上，它会在浏览器上编译和执行应用程序，但在 aot 交付给浏览器的整个应用程序是预编译的，因此提高了性能

build- 将打包文件并将其放在 dist 文件夹中，以便我们可以将它们用于服务器上的部署。

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

【讨论】：

【解决方案2】：

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

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

此外，有时对于某些模板，AoT 大小可能大于 JIT。 gzip 压缩的版本应该是相反的，因为大部分 AoT 内容都是一遍又一遍地重复的相同语句。

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

【讨论】：

【解决方案3】：

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

【讨论】：

它到底是在哪里说的？
"带有 --prod 元标志 (ng build --prod) 的 ng build 命令默认使用 AOT 编译。" - angular.io/guide/aot-compiler.

【解决方案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 的文件大小，在您的项目中使用 ng build 构建您的应用程序> 构建目录中的文件，它将位于 MBS 中，这些文件会下载到浏览器并使我们的应用程序过度加载。

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

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

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

【讨论】：