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