Angular 2：即时（JiT）与提前（AoT）编译

Question

我指的是this documentation，并且遇到了编译概念。可以使用JIT或AOT编译。但是，我发现它非常简短，需要详细了解以下几点，

• 这两种技术之间的差异
• 关于何时使用
的建议

Answer 1

JIT - 及时编译TypeScript以执行它。

• 在浏览器中编译。
• 每个文件单独编译。
• 在更改代码之后和重新加载浏览器页面之前无需构建。
• 适合当地发展。

AOT - 在构建阶段编译TypeScript。

• 由机器本身编译，通过命令行（更快）。
• 所有代码编译在一起，在脚本中内联HTML / CSS。
• 无需部署编译器（角度大小的一半）。
• 更安全，原始来源未透露。
• 适合生产。

Answer 2

虽然有一些答案，但我想补充一些我的发现，因为 我真的很困惑实际上正在编译 ，就像所有的案例，TS - ＆gt; JS转换发生了。我从Jeff's blog获取一些段落作为参考。

JIT

开发人员编写的TS代码编译为JS代码。现在，这个编译的js代码再次由浏览器编译，以便html可以根据用户操作动态呈现，并相应地编码angular（对于组件，更改检测，依赖注入）也是在运行时生成的。

（浏览器编译器接受应用程序的指令和组件及其相应的HTML和CSS，并创建组件工厂以快速标记具有所有视图创建逻辑的实例。） < / p>

  

当在浏览器中引导Angular 2应用程序时，JIT编译器执行大量工作以在运行时分析应用程序中的组件并在内存中生成代码。刷新页面时，所有已完成的工作都会被丢弃，JIT编译器会重新完成工作。

AOT

开发人员编写的TS代码编译为JS代码，此js  已经编译为角度。现在，这个已编译的 js代码再次被浏览器再次编译，以便可以呈现html。但是，这里的问题是angular的功能已经由AOT编译器处理过，因此浏览器不必担心组件创建 ，改变检测，依赖注入。所以，我们有：

  

更快的渲染

使用AOT，浏览器会下载应用程序的预编译版本。浏览器加载可执行代码，以便它可以立即呈现应用程序，而无需先等待编译应用程序。

  

更少的异步请求

编译器在应用程序JavaScript中内联外部HTML模板和CSS样式表，从而消除了对这些源文件的单独的ajax请求。

  

较小的Angular框架下载大小

如果已经编译了应用程序，则无需下载Angular编译器。编译器大约是Angular本身的一半，因此省略它会大大降低应用程序的有效负载。

  

提前检测模板错误

AOT编译器在构建步骤中检测并报告模板绑定错误，然后用户才能看到它们。

  

更好的安全性

AOT在将HTML模板和组件提供给客户端之前很久就将其编译为JavaScript文件。由于没有可读取的模板且没有冒险的客户端HTML或JavaScript评估，因此注入攻击的机会较少。

Benyamin，Nisar＆amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp;高朗。

随意纠正我

Answer 3

Benyamin和Nisar在这里提到了一些好处。我会补充一下。

虽然从理论上讲，AOT在生产方面看起来比JIT更具吸引力，但我怀疑AOT是否真的值得！

好吧，我找到了nice stats by Jeff Cross，它确实证明了AOT显着缩短了应用程序的自举时间。从Jeff Cross＆＃39;帖子会让你快速了解它，

Answer 4

JiT（及时）编译

名称本身描述了工作方式，它只是在将页面加载到浏览器中时编译代码。浏览器将下载编译器，并构建应用程序代码并进行渲染。

这对开发环境很有好处。

AoT（提前）编译

它在构建应用程序时编译所有代码。因此，浏览器不想下载编译器并编译代码。通过这种方法，浏览器只需加载已编译的代码即可轻松呈现应用程序。

可以在生产环境中使用

我们可以如下比较JiT和AoT编译

Answer 5

JIT（即时编译）

AOT（提前编译）

Answer 6

实际上只有一个Angular编译器。 AOT和JIT之间的区别在于时序和工具。使用AOT，编译器在构建时使用一组库运行一次;使用JIT，它在运行时每次为每个用户运行一组不同的库。

Answer 7

找到了一个很好的解释here ..

TLDR;

基本上我们使用angular2应用程序编译代码两次，一次将TS转换为JS，然后将浏览器转换为二进制文件。

虽然我们无法控制后者，但我们可以控制何时执行从TS到JS的编译。

对于angular2，如果你使用JIT（默认值），则在浏览器中加载代码后（即TS - ＆gt; JS - ＆gt;二进制文件）都会发生编译。这不仅是进行TS的额外开销 - >在浏览器上动态编译JS，但是，angular2编译器的大小几乎是angular2包的一半，所以如果我们避免这种情况，我们可以大大减少有效负载的大小。

AOT预装了JS代码到JS，减少了编译时间以及代码的大小，通过消除了占编码器50％的角度编译器的需要

Answer 8

一天结束时，AOT（提前）和JIT（及时）执行相同的操作。它们都编译您的Angular代码，因此它可以在本机环境（也称为浏览器）中运行。关键区别在于编译发生的时间。使用AOT，您的代码将在应用程序下载到浏览器之前进行编译。使用JIT，您的代码将在运行时在浏览器中编译。

这里是比较：

AOT的好处：

• 快速启动，因为在浏览器中不会进行解析和编译。
• 模板在开发过程中被检查（这意味着我们在正在运行的应用程序的javascript控制台中看到的所有错误，否则将在构建过程中抛出）。
• 文件大小更小，因为可以删除未使用的功能，并且不提供编译器本身。

Answer 9

我们在角度项目的开发过程中使用的JIT编译器。在此编译中（TS到JS的转换）发生在应用程序的运行时。 在构建用于在生产环境中部署应用程序的应用程序代码期间使用AOT的情况下，那时我们使用ng build --prod命令生成名为webpack的文件夹来构建应用程序代码，因此webpack包含所有文件的捆绑包（HTML ，CSS和Typescript）压缩的javascript格式。

为生产环境生成的webpack文件夹的大小远远小于为开发环境生成的文件夹（使用命令... ng build），因为它不包含webpack文件夹内的编译器，从而提高了性能的应用程序。