2016-09-14 59 views
5

提前编译(或AoT)是Angular2中提供的一项功能。但我在官方网站上找不到关于它的好解释。什么是Angular2中的AoT(或提前编译)?

有人可以明确定义它吗?

+2

http://stackoverflow.com/questions/39464319/how-does-angular2-ahead-of-time-aot-compilation-work – yurzui

+0

感谢您的链接的可能DUP,我已经审查它,但仍然在寻找一种确切的定义 –

回答

6

我们使用angular2特有语法(如ngFor)或管道或数据绑定材料的模板需要编译为vm友好代码,浏览器可以读取该代码。

为了及时编译(常规行为),框架需要运送角编译器,并在应用程序启动时在浏览器上编译模板。这意味着更高的捆绑包角度必须出货,并且加载时间更长,因为浏览器必须先编译模板才能呈现模板。

这与我们如何在浏览器中打印打字稿相似。由于这是昂贵的过程,因此我们一般在捆绑或构建过程时将离线脚本脱机。

呈现模板离线给出一些优惠,如

  • 较小的集束大小:在angular2库的60%是编译器。现在模板已经提前编译了,我们不需要再编译编译器了。这减少了应用程序需要发送的包的大小
  • 更快的加载时间:由于模板已经编译为VM友好的代码,因此浏览器不需要时间来渲染模板。导致更快的页面渲染。
+0

AOT只是将html模板转换为函数的事实。因此,基本上,你的应用程序应该更快(不需要在bootstrap上快速编译teplates)。所以我同意**更快的加载时间**。 但是对于**小包尺寸**,它不会因为AOT而发生。您需要使用类似汇总的动作来树形图代码(并减少包的大小)。这是早期阶段。 – Maxime

+0

除了摇动树木之外,由于角度编译器(这是angular2的主要部分)不包含在捆绑 –

+0

“中,除了摇动树木之外,因为角度编译器...是主要部分角度2“。您需要**才能执行AOT构建,然后才能执行有效的树状抖动。 – Maxime

1

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

的角度名列前茅的时间预编译编译生成过程中的应用组件和它们的模板。

由于多种原因,使用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.