导航

JIT和AOT编译详解

Posted on 2017-08-24 01:37  水木山川  阅读(11040)  评论(0编辑  收藏  举报

  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