Angular中的即时（JiT）与提前（AoT）编译

111

我在查阅本文档时遇到了编译概念。可以使用JIT或AOT编译。但是，我发现它非常简短，需要详细了解以下几点，

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

angular compilation

— 高朗·帕特尔（Gaurang Patel）
source

148

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

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

AOT-在构建阶段编译TypeScript。

由机器本身通过命令行（更快）进行编译。
所有代码一起编译，在脚本中内联HTML / CSS。
无需部署编译器（半角大小）。
更安全，原始消息未公开。
适用于生产版本。

— 本雅明·肖汉姆
source

2

另外，在使用即时编译时，我的性能非常差，尤其是在较旧的Android设备上。而且，首页加载时的渲染间隙要大得多（在较旧的Android设备上，最长可达10秒，具体取决于项目的大小）。

— Felix Hagspiel

29

打字稿不是及时编译的，浏览器无法做到。在这两种情况下，打字稿都是在构建过程中进行编译的。

— Robouste

2

@Robouste：这正是让我感到困惑的..确实是提前且及时地编译的内容。（如果TJS立即编译）。当我在浏览器中请求页面时，将在浏览器中下载并执行javascript，是否有任何typedJ需要进入浏览器？不，一点也不...那么，什么东西要提前和及时地编译呢？实际上，这就是角度编译器的意思。该链接将回答所有问题：“ angular.io/guide/aot-compiler ”

— Assil

2

我不是专家，但是在使用JIT时，Angular源会发送到浏览器，它将编译应用程序。它允许您拥有需要在运行时进行编译的动态内容。借助AOT，所有内容均已预编译，因此服务器将发送通用的javascript网站。您可以提高执行速度并缩短加载时间。

— Robouste

极好的答案，评论也对我有用。

— Rakshit Shah，

61

尽管有一些答案，但我也想补充一下我的发现，因为在所有情况下我都对实际正在编译的内容感到困惑，TS-> JS发生了转换。我以Jeff博客中的一些段落为参考。

准时制

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

（浏览器编译器采用应用程序的指令和组件以及它们相应的HTML和CSS，并创建组件工厂以使用其所有视图创建逻辑快速删除实例。）

在浏览器中引导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和Gaurang的要点中涵盖。

随时纠正我

— 沙尚克·维维克
source

5

谢谢。阅读您的答案后，我终于明白了，并且阅读了很多内容。

— Mario Subotic

24

本雅明和尼萨尔在这里提到了一些优点。我将添加到它。

从理论上讲，就生产目的而言，AOT似乎比JIT更具吸引力，但我怀疑AOT是否真的值得！

好吧，我发现Jeff Cross提供了不错的统计数据，它确实证明AOT大大减少了该应用程序的启动时间。在Jeff Cross的帖子下面的快照中，您可以快速了解一下，

— 高朗·帕特尔（Gaurang Patel）
source

19

JiT（及时）编译

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

这将有利于开发环境。

AoT（提前）编译

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

可以在生产环境中使用

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

— Vivekkurien
source

1

这是否意味着JiT应用程序第一次加载会更快，但是之后AoT应用程序总是会加载更快？

— JKL

决不。JiT的加载速度比AoT慢

— -vivekkurien

AOT比JIT慢，因为它在运行时不兼容。您必须更改jit和aot标题

— Mr.AF

17

JIT（及时编译）

即时（JIT）是一种编译类型，可在运行时在浏览器中编译您的应用程序。

ng build
ng serve

AOT（提前编译）

提前（AOT）是一种编译类型，可在构建时编译您的应用程序。

ng build --aot
ng serve --aot

— 乔比·威尔逊·马修斯（Joby Wilson Mathews）
source

2

这两个数字有什么区别？它不需要介绍吗？

— Mr.AF

因此，基本上，Ahead-of-Time更像Ahead-of-Runtime。

— Alireza Kahaei

@ Mr.AF刚注意到，现在图像也相同。

— Tiago Martins Peres李大仁

14

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

比较如下：

AOT的好处：

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

— pk_code
source

4

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

— 阿尼斯程序员
source

2

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

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

— 用户名
source