AOT是Ahead of Time compile 的缩写,顾名思义提前编译。
关于AOT的好处,在这里就不一一细说,更高效,更安全,bla,bla....
与AOT相对的则是JIT(Just in time),翻译成中文就是即时编译。
对于浏览器而言,只认识JavaScript代码,什么angular,typescript,html通通不认识。所以需要将我们写好的诸多的angular组件翻译成浏览器认识的语言。所以AOT 和 JIT 的本质区别就是, AOT是一种在构建阶段(build)就将其翻译成JavaScript的过程,而JIT 则是在运行阶段即刻翻译的过程。
本文重点要说明的是对AOT的使用:
安装依赖包
AOT编译使用ngc编译器进行编译,他是typescript编译器tsc的高仿品,他们的配置方式几乎一模一样。
npm install@angular/compiler-cli @angular/platform-server--save
配置文件 tsconfig-aot.json
ngc需要一个AOT专用配置文件。
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
"./node_modules/@types/"
]
},
"files": [
"src/app/app.module.ts",
"src/main.ts"
],
"angularCompilerOptions": {
"genDir": "aot",
"skipMetadataEmit" : true
}
}
对比JIT编译, compilerOption里面只把module改成了es2015.
真正和ngc有关的配置是angularCompilerOptions部分的内容。 它的genDir属性告诉编译器把编译结果保存在新的aot目录下。"skipMetadataEmit" : true属性阻止编译器为编译后的应用生成元数据文件。 当输出成TypeScript文件时,元数据并不是必须的,因此不需要包含它们。
特别注意: AOT编译要求模板URL和外部cssU URL的值是一个相对于组件类文件的URL值
编译应用
使用ngc编译器对应用进行编译
node_modules/.bin/ngc -p tsconfig-aot.json
编译完成后,会生成一个aot目录,目录下面是一组NgFactory文件。每一个工厂文件都会在运行时结合JavaScript所封装的css文件和模板文件,创建对应的组件实例。
启动应用(bootstrap)
启动应用时候,从原来引导AppModule改成了引导工厂模块AppModuleNgFactory.
配置build命令
- package.json 里面添加
"build": npm run build:aot"
总结
开发器使用JIT, 产品期使用AOT
推荐文章:
(一) JIT 与 AOT的区别 https://segmentfault.com/a/1190000008739157
网友评论