javascript - Angular2 提前 (AoT) 编译如何工作？

Question

Angular 2 带有称为提前 (AoT) 的新功能。但是看了一番，还是不能真正理解。它是如何工作的？它将如何带来更好的性能？它与 JIT 有何不同？

谢谢。

Answer 1

Angular 在模块、指令和管道的 View 和装饰器中使用声明式绑定(bind)，这些需要由浏览器中的 JS 解释以执行它们的预期目的。

离线模板编译器用生成的静态代码替换声明式绑定(bind)和装饰器。

这使得 Angular2 组件实例化和初始化更快，因为 JS 要做的工作更少。在将应用程序提供给客户端之前，组件的“编译”已经完成。

如果您不使用其他在运行时需要它的功能，则可以省略 platform-b​​rowser-dynamic 并且根本不需要加载到浏览器中。

有一些讨论是否生成的代码不会超过浏览器动态平台的大小，但据我所知，Angular2 团队进行了大量试验和基准测试以确保最佳性能。

来自 AoT 食谱

Angular components consist of a mix of standard html and Angular syntax (e.g. ngIf, ngFor).

Expresions like ngIf and ngFor are specific to Angular, so there is no way for the browser to execute them directly.

Before the browser can render the application, Angular specific code and templates have to be converted to regular executable JavaScript. We refer to this step as compilation.

By default compilation is executed by the browser at runtime, during what is called Just in Time compilation (JIT). It's called "Just in Time" since compilation happens on the fly as the application loads.

The downside to JIT compilation is a runtime performance penalty. Views take longer to render because of the compilation step. It also forces us to download the Angular compiler along with our application code since we will need the compiler at runtime.