ChatGPT解决这个技术问题 Extra ChatGPT

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

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

这两种技术的区别

关于何时使用什么的建议


B
Benyamin Shoham

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
C
Community

虽然有一些答案,但我也想补充一些我的发现,因为在所有情况下,我真的对实际正在编译的内容感到困惑,{ 2} --> JS 转换发生。我将 Jeff's blog 中的一些段落作为参考。

即时通讯

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

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

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

奥特

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

更快的渲染

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

更少的异步请求

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

较小的 Angular 框架下载大小

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

更早地检测模板错误

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

更好的安全性

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

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

随时纠正我


谢谢。阅读您的答案后,我终于明白了,并且我阅读了很多。
简单解释。 :)
J
Joby Wilson Mathews

JIT(即时编译)

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

ng build
ng serve

https://i.stack.imgur.com/sRJ7F.jpg

AOT(提前编译)

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

ng build --aot
ng serve --aot

https://i.stack.imgur.com/4UrHQ.jpg


这两个数字有什么区别?不需要介绍吗?
所以基本上 Ahead-of-Time 更像是 Ahead-of-Runtime。
@Mr.AF 刚刚注意到,现在图像也是一样的。
图像看起来相似但不同。在第二张图中,编译发生在构建时,由分隔构建和运行阶段的垂直线表示。
G
Gaurang Patel

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

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

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

https://i.stack.imgur.com/MTDfo.png


v
vivekkurien

JiT(及时)编译

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

这将有利于开发环境。

AoT(提前)编译

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

可用于生产环境

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

https://i.stack.imgur.com/ejDBF.png


这是否意味着 JiT 应用程序第一次加载速度更快,但之后 AoT 应用程序总是加载速度更快?
绝不。 JiT 加载速度比 AoT 慢
AOT 比 JIT 慢,因为它在运行时不符合要求。您必须更改 jit 和 aot 标题
p
pk_code

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

https://i.stack.imgur.com/CoBK6.png

AOT 的好处:

由于解析和编译不会在浏览器中发生,因此启动更快。

在开发过程中会检查模板(这意味着我们在正在运行的应用程序的 javascript 控制台中看到的所有错误,否则将在我们的构建过程中抛出)。

较小的文件大小,因为未使用的功能可以被剥离,编译器本身不发货。


a
anis programmer

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


您能否详细说明不同库集的这个主题?
u
user13601355

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

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


关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

领先一步获取最新的外包任务吗?

立即订阅