JIT - 及时编译 TypeScript 以执行它。
在浏览器中编译。
每个文件单独编译。
在更改代码后和重新加载浏览器页面之前无需构建。
适合当地发展。
AOT - 在构建阶段编译 TypeScript。
由机器自己编译,通过命令行(更快)。
所有代码一起编译,在脚本中内联 HTML/CSS。
无需部署编译器(Angular 大小的一半)。
更安全,原始来源未披露。
适用于生产构建。
虽然有一些答案,但我也想补充一些我的发现,因为在所有情况下,我真的对实际正在编译的内容感到困惑,{ 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 的要点已经涵盖了其余差异。
随时纠正我
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
Benyamin 和 Nisar 在这里提到了一些优点。我会补充的。
虽然从理论上讲,对于生产目的,AOT 看起来比 JIT 更有吸引力,但我怀疑 AOT 是否真的值得!
好吧,我找到了 nice stats by Jeff Cross,它确实证明 AOT 显着减少了应用程序的引导时间。下面来自 Jeff Cross 帖子的快照将让您快速了解它,
https://i.stack.imgur.com/MTDfo.png
JiT(及时)编译
名称本身描述了工作,它仅在浏览器中加载页面时编译代码。浏览器将下载编译器并构建应用程序代码并呈现它。
这将有利于开发环境。
AoT(提前)编译
它在构建应用程序时编译所有代码。所以浏览器不想下载编译器和编译代码。在这种方法中,浏览器只需加载已编译的代码即可轻松呈现应用程序。
可用于生产环境
我们可以比较 JiT 和 AoT 编译如下
https://i.stack.imgur.com/ejDBF.png
在一天结束时,AOT(Ahead-of-Time)和 JIT(Just-in-Time)做同样的事情。它们都编译您的 Angular 代码,以便它可以在本机环境(也称为浏览器)中运行。主要区别在于编译发生的时间。使用 AOT,您的代码在 App 下载到浏览器之前被编译。使用 JIT,您的代码在运行时在浏览器中编译。
https://i.stack.imgur.com/CoBK6.png
AOT 的好处:
由于解析和编译不会在浏览器中发生,因此启动更快。
在开发过程中会检查模板(这意味着我们在正在运行的应用程序的 javascript 控制台中看到的所有错误,否则将在我们的构建过程中抛出)。
较小的文件大小,因为未使用的功能可以被剥离,编译器本身不发货。
实际上只有一个 Angular 编译器。 AOT 和 JIT 之间的区别在于时间和工具。使用 AOT,编译器在构建时使用一组库运行一次;使用 JIT,它每次在运行时使用一组不同的库为每个用户运行。
我们在开发 Angular 项目期间使用的 JIT 编译器。在此编译(TS 到 JS 的转换)中发生在应用程序的运行时。在构建应用程序代码以在生产中部署应用程序期间使用 AOT 时,我们使用 ng build --prod 命令构建应用程序代码,该命令生成一个名为 webpack 的文件夹,webpack 包含所有文件的捆绑包(HTML , CSS 和 typescript) 以压缩的 javascript 格式。
生产环境生成的webpack文件夹的大小远小于开发环境生成的文件夹(使用命令...ng build),因为webpack文件夹内不包含编译器,提高了应用程序的性能.
ng build
来将 TS 转换为 JS