首页 技术 正文
技术 2022年11月19日
0 收藏 491 点赞 2,499 浏览 2010 个字

angluar的编译有以下几种方式:

ng build  常规的压缩操作    代码体积最大

 ng build –aot   angular预编译      代码体积较小

 ng build –prod   angular预编译    代码体积最小,访问速度最快

–prod 默认 开启了–aot ,所以在使用–prod 和 –prod –aot是一样的。

关于JIT和AOT,复制了知乎上的一段话,讲的很好。

 JIT和AOT的思想都一样。在JAVA中,JIT(Just In Time即时编译)是运行时优化,AOT(Ahead Of Time)是编译时优化。

 什么是运行时优化?举个例子,当虚拟机发现一段代码调用的频率很高,就会将这段代码判定为热点代码,紧接着就会将这段代码直接编译为机器码,从而提高这段代码的运行速度。

 什么是编译时优化?在编译时将所有的代码编译成机器码,这样做会增加编译时间,同时需要占用更多的存储空间,但能够提升程序的性能。

 如果你调试时使用AOT,会增加你的编译时间。特别是项目比较大的时候,每做一次修改,都要编译很久才能验证。因此,调试时不应该使用AOT。

下面转自https://www.jianshu.com/p/2bb307ad94e7

  

  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命令

  1. package.json 里面添加

“build”: npm run build:aot”

总结

  开发器使用JIT, 产品期使用AOT

推荐文章:

  (一) JIT 与 AOT的区别 https://segmentfault.com/a/1190000008739157

  (二) 官方文档 https://angular.cn/guide/aot-compiler

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,964
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,486
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,331
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,114
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,747
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,781