Angular编译及变化检测相关详解

一、编译

1、为什么 Angular 需要编译

Angular 是基于 TypeScript，编译打包的时候会用 tsc 将 TypeScript 编译成 es5 文件，这样在浏览器 JavaScript Virtual Machines (VM) 可以直接运行 es5 代码。那么 Angular 为什么还需要编译呢？在 Angular 中除了 TypeScript 之外，还有 HTML 模板文件，在这些模板文件里有 Angular 自带的组件、指令、管道等等，为了让浏览器可以识别和运行这些东西，那么就需要用 Angular 编译器把这些编译成浏览器可识别和运行的 es5 代码。

2、Angular 编译机制：JiT vs AoT

ng build和ng serve是 JiT 的编译方式，
ng build --prod ng build --aot 或者ng serve --aot是 AoT 的编译方式。

一句话概括两者的区别： Angular 编译器（ngc）执行的时机不一样

JiT 是浏览器在渲染页面的时候先把 Angular 编译器下载到本地，然后把 HTML 模板编译成浏览器可识别运行的 es5 代码；

AoT 是项目在打包的时候就把 HTML 模板编译成浏览器可识别运行的 es5 代码，在浏览器渲染时不需要下载 Angular 编译器也不需要编译，直接运行这些代码就可以了

3、总结一下 JiT 和 AoT 的主要区别：

• 打包之后的文件大小不一样，最大的区别是 JiT 需要把 compiler 源码打包进 bundle 文件，而 AoT 不需要。

• bundle 文件的内容也有很大区别：JiT 把 HTML 模板直接内联进 bundle 文件不做任何处理，AoT 会把 HTML 模板文件编译 es5 文件。

• 编译执行的时机不一样，JiT 是在浏览器里执行，需要内联的 HTML 文件编译成 es5 代码；AoT 是在编译打包的时候就把 HTML 文件编译成 es5 代码。

• 不管是 JiT 还是 AoT，最终的结果文件是一样的。JiT 编译