Angular系列之AoT编译

2024年3月21日 219次阅读 来源: escaple_plan

概览

众所周知, angular应用在可执行之前, angular应用中的组件和模板必须被转化为可以被浏览器识别的javascript代码, 而这种转化正是通过angualr自身的编译器所执行的.

angular提供了两种编译方式, 即AOT(预编译)和JIT(即使编译), 其中JIT为默认的编译方式

AOT即 Ahead of time, 是指在构建时进行编译, 即在服务端即完成了编译
JIt即 Just-in-Time, 在运行期间编译该应用，也就是在应用加载时。

AOT vs JIT

实际上只有一个编译器,两者的区别只是编译的时机和工具不同

JIT编译导致运行期间的性能损耗。 由于需要在浏览器中执行这个编译过程，视图需要花更长时间才能渲染出来。 由于应用包含了Angular编译器以及大量实际上并不需要的库代码，所以文件体积也会更大。 更大的应用需要更长的时间进行传输，加载也更慢。

编译可以发现一些组件模板绑定错误。JIT编译在运行时才揭露它们，那样有点太晚了。

而预编译（AOT）会在构建时编译，这样可以在早期截获模板错误，提高应用性能。

JiT编译模式的流程

一个典型的jiT应用的开发流程大概是：

  • 使用TypeScript开发Angular应用
  • 使用tsc来编译这个应用的ts代码
  • 打包
  • 压缩
  • 部署

一旦把app部署好了，并且用户在浏览器中打开了这个app，下面这些事情会逐一进行：

  • 浏览器下载js代码
  • Angular启动
  • Angular在浏览器中开始JiT编译的过程，例如生成app中各个组件的js代码
  • 应用页面得以渲染

相对的，使用AoT模式的应用的开发流程是：

  • 使用TypeScript开发Angular应用

  • 使用ngc来编译应用

    • 使用Angular编译器对模板进行编译，生成TypeScript代码
    • TypesScript代码编译为JavaScript代码
  • 打包
  • 压缩
  • 部署

虽然前面的过程稍稍复杂，但是用户这一侧的事情就变简单了：

  • 下载所有代码
  • Angular启动
  • 应用页面得以渲染

概括起来，Angular中的Jit和AoT的主要区别是：

  • 编译过程发生的时机
  • JiT生成的是JS代码，而AoT生成的是TS代码。这主要是因为JiT是在浏览器中进行的，它完全没必要生成TS代码，而是直接生产了JS代码。

深入AOT编译

AOT编译的配置

安装npm依赖

npm install @angular/compiler-cli @angular/platform-server --save

把下列npm便利脚本添加到package.json中，以便用一条命令就可以完成编译

"build:aot": "ngc -p tsconfig-aot.json

用@angular/compiler-cli包中提供的ngc编译器来代替TypeScript编译器（tsc）。

配置tsconfig-aot.json 文件

只需将tsconfig.json 文件复制过来进行修改即可

{
  "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
 }
}

compilerOptions部分只修改了一个属性：**把module设置为es2015(为后面摇树优化做准备)

ngc区真正新增的内容是底部的angularCompilerOptions。 它的genDir属性告诉编译器把编译结果保存在新的aot目录下

"skipMetadataEmit" : true属性阻止编译器为编译后的应用生成元数据文件。 当输出成TypeScript文件时，元数据并不是必须的，因此不需要包含它们。

启动AOT编译：

node_modules/.bin/ngc -p tsconfig-aot.json

编译完成后生成了一堆NgFactory文件,不要编辑这些NgFactory！重新编译时会替换这些文件.

改变引导方式main.ts 文件

从platformBrowserDynamic.bootstrap改成使用platformBrowser().bootstrapModuleFactory并把AppModuleNgFactory的AOT编译结果传给它。

import { platformBrowser }    from '@angular/platform-browser';
import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';

console.log('Running AOT compiled');
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

摇树优化（Tree shaking）

摇树优化是指通过跟踪import和export语句来对应用进行静态分析,遍历依赖图谱,并且摇掉用不到的代码,通过移除源码和库代码中用不到的部分，摇树优化可以大幅缩减应用的下载体积

摇树优化能够在我们最终的Bundle中移除掉我们应用中没有使用到的代码。这是减少应用程序占用空间的最有效的技术之一。

目前webpack2已经支持tree shaking, 官网介绍的是Rollup在angular中的使用

知乎上关于tree shaking的介绍

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

目前，AOT编译和摇树优化对开发来说，占用的时间太多了。这将在未来得到改变。 当前的最佳实践是在开发器使用JIT编译，然后在发布产品前切换到AOT编译

    原文作者：escaple_plan
    原文地址: https://segmentfault.com/a/1190000010906373
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞