📜  什么是Angular中的AOT和JIT编译器?

📅  最后修改于: 2021-05-13 19:19:20             🧑  作者: Mango

角度应用程序主要由HTML模板组成,其模板包括各种TypeScript文件。有一些单元测试和配置文件。每当我们在应用程序上运行时,浏览器都无法直接理解代码,因此我们必须编译代码。

什么是Ahead of Time(AOT)编译器?

所有技术提前是将高级语言或中间语言编译成与系统有关的本机代码的过程。

简而言之,当您服务/构建角度应用程序时,Ahead of Time编译器会在构建期间转换您的代码,然后浏览器才下载并运行该代码。从Angular 9开始,默认情况下,对于提前编译器,编译选项设置为true。

为什么要使用Ahead of Time编译器?

  • 当您使用Ahead of Time Compiler时,在构建项目时,编译只会发生一次。
  • 输入新组件时,我们不必附带HTML模板和Angular编译器。
  • 它可以最小化您的应用程序的大小。
  • 浏览器不需要在运行时编译代码,它可以立即直接渲染应用程序,而无需等待首先编译应用程序,因此,它提供了更快的组件渲染速度。
  • The Ahead of time编译器可以更早地检测到模板错误。在用户看到它们之前,它会在构建步骤中检测并报告模板绑定错误。
  • AOT提供了更好的安全性。可以在将HTML组件和模板提供给客户端显示之前很长时间将它们编译为JavaScript文件。因此,没有要读取的模板,也没有风险的客户端HTML或JavaScript评估。这将减少注入攻击的机会。

时间提前如何运作?

我们使用Typescript,HTML,样式表来开发我们的Angular项目,并使用ng build –prod或ng构建来将我们的源代码构建为捆绑包,其中包括JS文件,index.html,样式表和资产文件。

现在,Angular使用angular编译器(无论您选择了哪个)来构建源代码,它们分三个阶段进行工作,即代码分析,代码生成和模板类型检查。在此过程结束时,捆绑包大小将比JIT编译器的捆绑包大小小得多。

之后,AOT将其构建为战争文件,以通过使用Heroku或JBoss或任何其他支持Node的主机直接部署。然后,我们使用CNAME将此主机映射到域。

现在,客户端可以通过域访问您的Web应用程序。浏览器将下载默认视图所需的所有必需文件,如HTML,样式表和JavaScript。最后,您的应用程序将启动并呈现。

如何在提前编译器中编译应用程序:对于提前编译应用程序,您无需做太多事情,因为从angular 9默认编译选项设置为Ahead of time。只需在服务末尾添加–AoT。

什么是即时(JIT)编译器?

即时编译器在执行程序之前的运行时在程序执行期间提供编译。简而言之,代码会在需要时而不是在构建时进行编译。

为什么以及何时应该使用即时编译器?

  • 即时编译器会分别编译每个文件,并且大多数情况下会在浏览器中进行编译。更改代码后,您无需再次构建项目。
  • 大多数编译是在浏览器端完成的,因此将花费更少的编译时间。
  • 如果您有一个大型项目,或者某些情况下大部分时间都不使用某些组件,那么您应该使用即时编译器。
  • 当您的应用程序在本地开发中时,“及时编译器”是最好的选择。

即时编译器如何工作?

最初,编译器负责将高级语言转换为机器语言,然后将其转换为可执行代码。

即时编译器可以在运行时编译代码,这意味着与其在构建时解释字节码,不如在调用该组件时编译字节码。

一些要点:

  • 在准时的情况下,并非所有代码都在初始时间编译。只有在应用程序启动时将需要的必要组件才会被编译。然后,如果项目中需要该功能,而编译代码中不需要该功能,则将编译该函数或组件。
  • 此过程将有助于减轻CPU的负担,并使您的应用程序快速渲染。
  • 还有一件有趣的事情是,您可以在“检查”模式下查看并链接到您的源代码,因为“及时”使用JIT模式和一个映射文件来编译您的代码。

提前(AOT)和即时(JIT)之间的比较–

JIT AOT
JIT downloads the compiler and compiles code exactly before Displaying in the browser. AOT has already complied with the code while building your application, so it doesn’t have to compile at runtime.
Loading in JIT is slower than the AOT because it needs to compile your application at runtime. Loading in AOT is much quicker than the JIT because it already has compiled your code at build time.
JIT is more suitable for development mode. AOT is much suitable in the case of Production mode.
Bundle size is higher compare to AOT. Bundle size optimized in AOT, in results AOT bundle size is half the size of JIT bundles.

You can run your app in JIT with this command:

ng build OR ng serve

To run your app in AOT you have to provide –aot at the end like:

ng build --aot OR ng serve --aot  
You can catch template binding error at display time. You can catch the template error at building your application.

结论:您可以通过两种方式来编译角度应用程序:JIT和AOT。两者都适合于不同的场景,例如您可以将JIT用于开发模式,而AOT在生产模式下更好。在JIT模式下,实现功能和调试很容易,因为您必须在AOT没有文件的情况下映射文件。但是,该AOT通过减小捆绑包大小并加快应用渲染速度,为生产模式的开发人员提供了很大的好处。