摘要：编译在运行时才揭露它们，那样有点太晚了。这是减少应用程序占用空间的最有效的技术之一。这将在未来得到改变。当前的最佳实践是在开发器使用编译，然后在发布产品前切换到编译
概览
众所周知, angular应用在可执行之前, angular应用中的组件和模板必须被转化为可以被浏览器识别的javascript代码, 而这种转化正是通过angualr自身的编译器所执行的.
angular提供了两种编译方式, 即AOT(预编译)和JIT(即使编译), 其中JIT为默认的编译方式
AOT即 Ahead of time, 是指在构建时进行编译, 即在服务端即完成了编译
JIt即 Just-in-Time, 在运行期间编译该应用，也就是在应用加载时。
实际上只有一个编译器,两者的区别只是编译的时机和工具不同
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编译
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85033.html
摘要：延伸阅读学习与实践资料索引与前端工程化实践前端每周清单半年盘点之篇前端每周清单半年盘点之与篇前端每周清单半年盘点之篇 前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单...
摘要：第一种方式是使用模块加载器，如果你使用加载器的话，路由在加载子路由模块时也是用的作为模块加载器。还需注意的是，想要使用还需像这样去注册它你当然可以在里使用任何标识，不过路由模块使用标识，所以最好也使用相同。 原文链接：Here is what you need to know about dynamic components in Angular showImg(https://se...
摘要：以下简单介绍的重大变化。状态转交及对的支持这样更便于在服务端和客户之间共享应用状态。状态转交的相关文档几周后会发布。我们删除很多以前废弃的如，也公布了一些新的废弃项。以上指南会详细介绍这些变更。已知问题当前已知与相关的问题。 我们很高兴地宣布Angular 5.0.0——五角形甜甜圈发布啦！这又是一个主版本，包含新功能并修复了很多bug。它再次体现了我们把Angular做得更小、更快、...
摘要：以下简单介绍的重大变化。状态转交及对的支持这样更便于在服务端和客户之间共享应用状态。状态转交的相关文档几周后会发布。我们删除很多以前废弃的如，也公布了一些新的废弃项。以上指南会详细介绍这些变更。已知问题当前已知与相关的问题。 我们很高兴地宣布Angular 5.0.0——五角形甜甜圈发布啦！这又是一个主版本，包含新功能并修复了很多bug。它再次体现了我们把Angular做得更小、更快、...
阅读 1701·2021-11-25 09:43
阅读 2665·2019-08-30 15:53
阅读 1807·2019-08-30 15:52
阅读 2897·2019-08-29 13:56
阅读 3316·2019-08-26 12:12
阅读 564·2019-08-23 17:58
阅读 2126·2019-08-23 16:59
阅读 930·2019-08-23 16:21
