Angular2 中的 AoT（或提前编译）是什么？答案

【问题标题】：What is AoT(or Ahead-of-Time Compilation) in Angular2?Angular2 中的 AoT（或提前编译）是什么？
【发布时间】：2017-01-22 03:09:24
【问题描述】：

提前编译（或 AoT）是 Angular2 中提供的一项功能。但是我在官方网站上找不到很好的解释。

谁能给个明确的定义？

【问题讨论】：

stackoverflow.com/questions/39464319/…的可能重复
感谢您的链接，我已经查看过它，但仍在寻找确切的定义

标签： angular angular2-aot

【解决方案1】：

我们使用 angular2 特殊语法（如 ngFor 或管道或数据绑定的东西）的模板需要编译为浏览器可以读取的 vm 友好代码。

对于即时编译（常规行为），框架需要提供 Angular 编译器，并且模板会在应用启动时在浏览器上进行编译。这意味着更大的包大小 angular 必须发送，并且加载时间更长，因为浏览器必须在渲染模板之前编译模板。

这类似于我们在浏览器中转换打字稿的方式。因为这是一个昂贵的过程，我们通常在捆绑或构建过程时离线转换 typescript。

离线渲染模板带来的好处很少

更小的包大小：angular2 库的 60% 是编译器。现在模板已经提前编译好了，我们就不需要再发布编译器了。这会减少应用需要发送的捆绑包大小
更快的加载时间：由于模板已经编译为 VM 友好的代码，浏览器不会花时间渲染模板。加快页面渲染速度。

【讨论】：

AOT 只是将 html 模板转换为函数的事实。因此，基本上，您的应用程序应该更快（无需在引导时即时编译模板）。所以我同意更快的加载时间。但是对于较小的捆绑包大小，由于 AOT，它不会发生。你需要使用类似 rollup 的东西来摇树你的代码（并减少包的大小）。这是早期阶段。
除了 tree shaking 之外，使用 AOT 也可以使用更小的包大小，因为 angular2 的主要部分 Angular 编译器不包含在包中
“除了摇树...因为 angular-compiler ... 是 angular2 的主要部分”。您需要运行 AOT 构建，然后才能执行有效的摇树。

【解决方案2】：

Angular2 文档： https://angular.io/docs/ts/latest/guide/deployment.html#!#aot

Angular Ahead-of-Time 编译器在构建过程中预编译应用程序组件及其模板。

使用 AOT 编译的应用启动速度更快有几个原因。
Application components execute immediately, without client-side compilation.
Templates are embedded as code within their components so there is no client-side request for template files.
You don't download the Angular compiler, which is pretty big on its own.
The compiler discards unused Angular directives that a tree-shaking tool can then exclude.

【讨论】：