ng build --aot 与 ng build --prod

我不是女神ヾ 2021-10-26 19:28 456阅读 0赞

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][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_segmentfault.com_a_1190000008739157]

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

转载于:https://www.cnblogs.com/lnlvinso/p/11241245.html

[https_www.jianshu.com_p_2bb307ad94e7]: https://www.jianshu.com/p/2bb307ad94e7
[https_segmentfault.com_a_1190000008739157]: https://link.jianshu.com?t=https://segmentfault.com/a/1190000008739157
[https_angular.cn_guide_aot-compiler]: https://link.jianshu.com?t=https://angular.cn/guide/aot-compiler