概览
众所周知,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编译 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|