zoukankan      html  css  js  c++  java
  • ng build --aot 与 ng build --prod

       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



  • 相关阅读:
    POJ 1887 Testing the CATCHER
    HDU 3374 String Problem
    HDU 2609 How many
    POJ 1509 Glass Beads
    POJ 1458 Common Subsequence
    POJ 1159 Palindrome
    POJ 1056 IMMEDIATE DECODABILITY
    POJ 3080 Blue Jeans
    POJ 1200 Crazy Search
    软件体系结构的艺术阅读笔记1
  • 原文地址:https://www.cnblogs.com/lnlvinso/p/11241245.html
Copyright © 2011-2022 走看看