原文
https://www.jianshu.com/p/c959d90e91ce
大綱
1、angular應用為什么需要編譯
2、angular的編譯模式類型
3、JIT(Just-In-Time)
4、AOT(Ahead-Of-Time)
5、JIT vs AOT
6、Angular2引導方式：基於JIT的動態引導和基於AOT的靜態引導。
1、angular應用為什么需要編譯
Angular應用中包含的組件、HTML模板（比如：@Directive、@Component、@NgModule、@Pipe）很多都是JS VM無法解析的，所以在瀏覽器渲染應用之前，組件和模板必須要被Angular編譯器轉換為可以執行的JavaScript。
2、angular的編譯模式類型
在 Angular 2 中有兩種編譯模式：
JIT - Just-In-Time - 即時編譯
AOT - Ahead-Of-Time - 預先編譯
3、JIT(Just-In-Time)
Just-in-Time 編譯模式開發流程
1、使用 TypeScript 開發 Angular 應用
2、運行 tsc 編譯 TypeScript 代碼
3、使用 Webpack 或 Gulp 等其他工具構建項目，如代碼壓縮、合並等
4、部署應用
應用部署后，當用戶通過瀏覽器訪問我們應用的時候，她將經歷以下步驟(非嚴格 CSP)：
1、下載應用相關的資源，如 JavaScript 文件、圖片、樣式資源
2、Angular 啟動
3、Angular 進入 JiT 編譯模式，開始編譯我們應用中的指令或組件，生成相應的 JavaScript 代碼
4、應用完成渲染
4、AOT(Ahead-Of-Time)
Ahead-Of-Time 編譯模式開發流程
1、使用 TypeScript 開發 Angular 應用
2、運行 ngc 編譯應用程序
2.1、使用 Angular Compiler 編譯模板，一般輸出 TypeScript 代碼
2.2、運行 tsc 編譯 TypeScript 代碼
3、使用 Webpack 或 Gulp 等其他工具構建項目，如代碼壓縮、合並等
4、部署應用
應用部署后，相比於 JIT 編譯模式，在 AOT 模式下用戶訪問我們的應用，只需經歷以下步驟：
1、下載應用相關的資源，如 JavaScript 文件、圖片、樣式資源
2、Angular 啟動 3、應用完成渲染
5、JIT vs AOT
AOT優勢
1、渲染得更快
2、需要的異步請求更少
3、需要下載的Angular框架體積更小
4、提早檢測模板錯誤
5、更安全
JIT優勢
編譯時間短，除非確實有動態組件的需求，否則jit唯一的優勢就是能用來做在線 Demo和開發調試。
6、Angular2引導方式：基於JIT的動態引導和基於AOT的靜態引導。
在Angular2，我們會在main.ts里通過引導AppModule來啟動應用。針對瀏覽器，可以選擇基於JIT編譯器的動態引導和基於AOT編譯器的靜態引導這兩種方式
基於JIT(Just in Time)編譯器的動態引導
在這種方式下，angular會在瀏覽器端動態編譯，然后啟動app。
/*
引導使用方式：
*/
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
基於AOT(Ahead of Time)編譯器的靜態引導
相對於動態引導，靜態引導會預先在build階段就生成一些工廠類，其中對應AppModule的工廠類為NgAppModuleFactory。
使用靜態引導有幾個優點：
1、因為是預先編譯好，不需要向瀏覽器傳輸Angular的編譯器，所以傳輸的內容更小。
2、和動態引導需要在瀏覽器端即時編譯不同，靜態引導從服務端下載完代碼后可即時啟動，啟動比較快。對於移動設備和一些低延時網絡里，這兩個有點顯得很重要。
/*
在main.ts使用AOT模式
*/
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from './app.module.ngfactory';
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
參考網址
aot和jit的區別：
https://segmentfault.com/a/1190000008739157
https://www.jianshu.com/p/ef895e705d58
Angular2引導方式：基於JIT的動態引導和基於AOT的靜態引導
http://blog.csdn.net/chelen_jak/article/details/54912204
AOT的Angular Compiler：
https://zhuanlan.zhihu.com/p/24579527
https://yq.aliyun.com/articles/67203