美文网首页我爱编程
Angular动态编译那些事------AOT

Angular动态编译那些事------AOT

作者: lolivialucky | 来源:发表于2017-08-07 14:56 被阅读1148次

    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

    相关文章

      网友评论

        本文标题:Angular动态编译那些事------AOT

        本文链接:https://www.haomeiwen.com/subject/yqmolxtx.html