原文
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