Angular 中的即时 (JiT) 与提前 (AoT) 编译

Posted 2023-02-14

【中文标题】Angular 中的即时 (JiT) 与提前 (AoT) 编译

【英文标题】：Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation in Angular

【发布时间】：2017-05-17 22:36:00

【问题描述】：

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

这两种技术的区别 关于何时使用什么的建议

【参考方案1】：

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

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

AOT - 在构建阶段编译 TypeScript。

由机器自己编译，通过命令行（更快）。 所有代码一起编译，在脚本中内嵌 html/CSS。 无需部署编译器（Angular 大小的一半）。 更安全，原始来源未公开。 适合生产版本。

【讨论】：

另外，我在使用即时编译时遇到了非常糟糕的性能，尤其是在较旧的 android 设备上。此外，第一页加载时的渲染间隙要大得多（在较旧的 Android 设备上最多 10 秒，具体取决于项目的大小）。

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

@Robouste：这正是让我感到困惑的地方。真正提前和及时编译的东西..（如果 TJS 立即编译）。当我在资源管理器中请求页面时，将在浏览器中下载并执行 javascript，是否需要任何 typedJs 到浏览器？不，一点也不……那么什么是提前和及时编译的……？？它实际上是指的角度编译器。此链接将回答所有问题：“angular.io/guide/aot-compiler”

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

@LucasFowler 您的浏览器将编译 Javascript，而不是 Typescript。这就是为什么你仍然需要ng build 来将 TS 转换为 JS

【参考方案2】：

Benyamin 和 Nisar 在这里提到了一些优点。我会补充的。

虽然从理论上讲，对于生产目的而言，AOT 看起来比 JIT 更有吸引力，但我怀疑 AOT 是否真的值得！

嗯，我找到了nice stats by Jeff Cross，它确实证明了 AOT 显着减少了应用程序的引导时间。以下来自 Jeff Cross 帖子的快照将让您快速了解它，

【参考方案3】：

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

【参考方案4】：

虽然有一些答案，但我也想补充一些我的发现，因为 我真的对实际编译的内容感到困惑情况下，TS --> JS 发生转换。我从Jeff's blog 中提取了一些段落作为参考。

JIT

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

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

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

AOT

开发者写的TS代码编译成JS代码，这个js 也已经为 Angular 编译过。现在，这个编译 js 代码再次被浏览器编译，这样html 就可以被渲染了。但是，这里的问题是 angular 的功能已经被 AOT 编译器处理，因此浏览器不必担心组件创建、更改检测、依赖关系注射。所以，我们有：

更快的渲染

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

更少的异步请求

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

较小的 Angular 框架下载大小

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

尽早检测模板错误

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

更好的安全性

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

---

Benyamin、Nisar 和 Gaurang 的要点已经涵盖了其余差异。

欢迎指正

【讨论】：

谢谢。看了你的回答，我终于明白了，我看了很多。

简单解释。 :)

【参考方案5】：

JiT（及时）编译

名称本身描述了工作，它在浏览器中加载页面时编译代码。浏览器将下载编译器并构建应用程序代码并呈现它。

对开发环境有好处。

AoT（提前）编译

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

可用于生产环境

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

【讨论】：

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

从不。 JiT 加载速度比 AoT 慢

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

【参考方案6】：

JIT（即时编译）

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

ng build
ng serve

AOT（提前编译）

Ahead-of-Time (AOT) 是一种在构建时编译您的应用的编译类型。

ng build --aot
ng serve --aot

【讨论】：

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

所以基本上 Ahead-of-Time 更像是 Ahead-of-Runtime。

@Mr.AF 刚刚注意到，现在图像也一样了。

图像看起来相似但不同。在第二张图中，编译发生在构建时，由分隔构建和运行阶段的垂直线表示。

【参考方案7】：

在一天结束时，AOT（Ahead-of-Time）和 JIT（Just-in-Time）做同样的事情。它们都编译您的 Angular 代码，以便它可以在本机环境（也称为浏览器）中运行。主要区别在于编译发生的时间。使用 AOT，您的代码在 App 下载到浏览器之前被编译。使用 JIT，您的代码在运行时在浏览器中编译。

这是比较：

AOT 的好处：

更快的启动

，因为解析和编译不会发生在浏览器中。

在开发过程中检查模板

（这意味着我们在运行应用程序的 javascript 控制台中看到的所有错误，否则将在我们的构建过程中抛出）。

文件大小更小

，因为可以去除未使用的功能，并且编译器本身不发货。

【参考方案8】：

我们在开发 Angular 项目期间使用的 JIT 编译器。在此编译（TS 到 JS 的转换）中发生在应用程序的运行时。 在构建应用程序代码以在生产中部署应用程序期间使用 AOT 时，我们使用 ng build --prod 命令构建应用程序代码，该命令生成一个名为 webpack 的文件夹，webpack 包含所有文件的捆绑包（HTML , CSS 和 typescript) 压缩的 javascript 格式。

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