实时(JT)与提前(AoT)角度编译

我指的是 这份文件，碰到了编译的概念。可以使用 JIT 或 AOT 编译。不过，我觉得很简短，需要知道以下几点细节,

  • 这两种技术的区别
  • 关于何时使用什么的建议
117301 次浏览
小开

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

  • 在浏览器中编译。
  • 每个文件单独编译。
  • 无需在更改代码后重新加载浏览器页之前进行生成。
  • 适合本地发展。

AOT-在构建阶段编译 TypeScript。

  • 由机器自己通过命令行编译(更快)。
  • 将所有代码编译在一起，在脚本中内联 HTML/CSS。
  • 不需要部署编译器(角度大小的一半)。
  • 更安全，原始来源不公开。
  • 适用于生产构建。
小开

本雅明和尼萨尔在这里提到了一些好的观点，我将补充一下。

虽然理论上，AOT 看起来是一个比 JIT 更有吸引力的生产选择，但我怀疑 AOT 是否真的值得！

我找到了 杰夫 · 克罗斯的统计数据不错，它确实证明了 AOT 显著地减少了应用程序的启动时间。下面的照片来自 Jeff Cross 的帖子，它会给你一个快速的想法,

enter image description here

小开

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

小开

虽然有一些答案，但我想补充一些我的发现，以及，因为 我真的搞不清楚到底在编译什么在所有的情况下，TS-> JS转换发生。我采取了一些从 杰夫的博客的参考。

JIT

由开发人员编写的 TS代码被编译成 JS代码。现在，这个编译好的 js代码再次由浏览器编译，这样就可以根据用户的操作动态地呈现 html，因此在运行时也会生成 angular(对于组件、变化检测、依赖注入)的代码。

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

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

AOT

开发人员编写的 TS代码被编译成 JS代码，< strong > this js 已经被编译为角度以及 。现在，浏览器再次编译这段 编译完毕 js代码，以便可以呈现 html。但是，这里需要注意的是，ABC2的特性已经被 AOT编译器处理过了，因此浏览器不需要太担心关于组件创建，变化检测，依赖注入。所以，我们有:

更快的渲染

使用 AOT，浏览器下载应用程序的预编译版本。浏览器加载可执行代码，这样就可以立即呈现应用程序，而不必等待首先编译应用程序。

更少的异步请求

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

更小的角度框架下载大小

如果应用程序已经编译好了，就不需要下载 Angular 编译器了。编译器大约是 Angular 本身的一半，因此省略它会大大减少应用程序的有效负载。

更早地检测模板错误

AOT 编译器在生成步骤中检测并报告模板绑定错误，然后用户才能看到这些错误。

更好的安全措施

AOT 在将 HTML 模板和组件提供给客户端之前很久就将它们编译成 JavaScript 文件。由于没有要读取的模板，也没有危险的客户端 HTML 或 JavaScript 评估，因此发生注入攻击的机会较少。

剩余的差异已经涵盖在 Benyamin、尼萨尔和高朗的要点中。

请随意纠正我

小开

JT (准时)编译

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

对开发环境有利。

AoT (提前)编译

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

可以在生产环境中使用

我们可以像下面这样比较 JT 和 AoT 编译

enter image description here

小开

(即时编译)

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

ng build
ng serve

enter image description here

提前编译

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

ng build --aot
ng serve --aot

enter image description here

小开

在一天结束的时候，AOT (提前)和 JIT (准时)做同样的事情。它们都编译了你的 Angular 代码，这样就可以在本地环境(也就是浏览器)中运行了。关键区别在于何时进行编译。使用 AOT，您的代码将在应用程序在浏览器中下载之前进行编译。使用 JIT，代码是在浏览器的运行时编译的。

比较如下: enter image description here

AOT 的好处:

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

JIT 编译器，我们在角度项目的开发过程中使用。在这个编译过程中(TS 到 JS 的转换)发生在应用程序的运行期间。 由于 AOT 用于构建用于在生产环境中部署应用程序的应用程序代码，那时我们使用 ng build —— prod 命令构建应用程序代码，该命令生成一个名为 webpack 的文件夹，webpack 包含压缩的 javascript 格式的所有文件(HTML、 CSS 和 typecript)。

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


提交答案