angular2的编译模式之AOT和JIT

大纲

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、应用完成渲染

JIT编译模式

JIT编译模式
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、应用完成渲染

AOT编译模式

AOT编译模式
5、JIT vs AOT
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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前两天,Jigsaw七巧板上来了个issue https://github.com/rdkmaster/jigsa...
    阿踏阅读 3,297评论 0 5
  • 为什么需要编译 Angular应用中包含的组件、HTML模板(比如:@Directive、@Component、@...
    OnePiece索隆阅读 2,953评论 3 4
  • 林园夏日 小白龙阿帆 携风来追林外凉, 青柳岸边倚石床。 月明蛙声参差起, 阑灯草虫欢自狂。
    小白龙阿帆阅读 321评论 0 2
  • 早上,读傅雷家书中一段:“比如说每次练琴都要让整个人的感情激动,我承认在某些罗曼蒂克性格,这是无可避免的;但“...
    我爱hz阅读 306评论 0 1