Angular编译器分为4个步骤，
一共发生了三次重大改变，分别是在
Angular2 模版编译器（2016）
- 生成的模版太长了，增加了太多了字节，包太大了
Angular4 ViewEngine编译器（2017）
他会生成一个数据结构，运行时数据结构传递到Angular解释器
- 将模版转化为数据结构，遍历数据接口执行DOM节点更新检测，但是遍历时候会消耗性能
- npm包发布困难，必须使用ngc遍历生成metadata.json文件
- 生成的文件不同，易读性
- 如果组件改变了，他的依赖也会重新编译
- 不利于摇树优化
angular4编译后会生成4种类型文件
- *.metadata.json: 把.ts(component, NgMdule)文件里的decorator信息和constructor的依赖注入信息用json的形式记录下来,然后第二次编译的时候直接从json里面获取。二次编译是指引用第三方的库，在编译自己项目的时候需要对第三方重新编译
- *.ngfactory.js: 里面包含了创建组件、渲染组件涉及DOM操作，执行变化简化检查（获取oldValue和newValue对比）、销毁组件的代码
- *.js： 是.ts(component/NgModule)文件里除了decorator和constructor之外的内容，编译成了es6代码
- *.ngsummary.json: 和metadata.json一样
Angular8 lvy编译器（2018）(摇树，灵活性)
- 动态组件使用更加方便
- 增量DOM
- 打包编译更快，包更小
- TypeCheck更加完全
- 不在生成metadata.json,ngfactory.js
- Easy to bug
- 动态组件更加方便
Virtual DOM & Incremental DOM
Virtual DOM通过js，初始化时，模拟真实的DOM节点，产生的一个‘虚拟DOM‘，这种虚拟DOM比起真实的DOM少了很多属性，但是也添加一个静态属性，<input type='text' value='123' />,其中type='text'就是静态属性，每当发生增加或删除时，会创建一个新的虚拟DOM,会与旧的虚拟DOM比较，通过diff算法进行比较（静态属性其实不需要比较的），同等级比较，得出结果，会得出差异，这些差异有分为好几种=》
