JIT和AOT编译详解

　　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 typescript@next @angular/platform-server @angular/compiler