JIT和AOT编译详解

Posted 2020-10-04

　　JIT和AOT编译介绍

JIT - Just-In-Time             　　实时编译，即时编译

通常所说的JIT的优势是Profile-Based Optimization，也就是边跑边优化，根据运行时信息然后随着时间的推移得到尽可能最优的代码，适用于开发调试。

AOT - Ahead-Of-Time              预先编译，静态编译

AOT与JIT对比有以下优点：

在客户端我们不需要导入体积庞大的angular编译器，这样可以减少我们 JS 脚本库的大小。使用 AOT 编译后的应用，不再包含任何 html 片段，取而代之的是编译生成的 TypeScript 代码，这样的话 TypeScript 编译器就能提前发现错误。总而言之，采用 AOT 编译模式，我们的模板是类型安全的。适用于部署发布。

 

特性                  　　　　  JIT                                   　　   AOT

编译平台     　　　　(Browser) 浏览器          　　  (Server) 服务器

编译时机   　　　　  Runtime (运行时)          　　   Build (构建阶段)

包大小            　　　　    较大                            　　　      较小

执行性能         　　　　    慢                                    　　　 更好

启动时间          　　　　   长                                    　　　 更短

 

　　Angular JIT和AOT编译

基于JIT(Just in Time)编译器的动态引导

在main.ts使用JIT模式

import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic‘;

import { AppModule } from ‘./app.module‘;

platformBrowserDynamic().bootstrapModule(AppModule);

 

基于AOT(Ahead of Time)编译器的静态引导

在main.ts使用AOT模式

import { platformBrowser } from ‘@angular/platform-browser‘;

import { AppModuleNgFactory } from ‘./app.module.ngfactory‘;

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

 

　　JIT和AOT编译器都会生产AppModuleNgFactory，只是方式不一样。JIT在浏览器，缓存里实时生产AppModuleNgFactory 。AOT编译器会生产一个物理文件app.module.ngfactory。AOT模式引入这个文件，然后启动： 

import { AppModuleNgFactory } from ‘./app.module.ngfactory‘; 

生成app.module.ngfactory

@angular/compiler-cli提供了tsc和AOT两种编译器，把TypeScript转换为javascript：

　　安装ngc

npm install @angular/compiler-cli [email protected] @angular/platform-server @angular/compiler