Angular:深入理解Angular编译机制 | angular編譯
在这篇文章中会介绍以下内容:为什么Angular需要编译。Angular编译机制:JiTvsAoT。AoT的工作原理(ngc)。AoT对性能的影响。这篇文件是基于Angular8,这个版本的Angular的模板引擎还是ViewEngine(Angular4~Angular8模板引擎是ViewEngine),这篇文章的编译机制也是基于模板引擎ViewEngine,也就是说这篇文章的编译机制适用于Angular4~Angular8。Angular9以后,模板引擎从ViewEngine升级到了Ivy,Angular的编译机制也基于Ivy重写升级,后续会有新的文章介绍Ivy。为什么Angular需要编译Angular是基于TypeScript,编译打包的时候会用ts...
在这篇文章中会介绍以下内容:
为什么 Angular 需要编译。 Angular 编译机制:JiT vs AoT。 AoT 的工作原理(ngc)。 AoT 对性能的影响。这篇文件是基于 Angular8,这个版本的 Angular 的模板引擎还是 View Engine(Angular4 ~ Angular8 模板引擎是 View Engine),这篇文章的编译机制也是基于模板引擎 View Engine,也就是说这篇文章的编译机制适用于 Angular4 ~ Angular8。
Angular9 以后,模板引擎从 View Engine 升级到了 Ivy,Angular 的编译机制也基于 Ivy 重写升级,后续会有新的文章介绍 Ivy。
为什么 Angular 需要编译Angular 是基于 TypeScript,编译打包的时候会用 tsc 将 TypeScript 编译成 es5 文件,这样在浏览器 JavaScript Virtual Machines (VM) 可以直接运行 es5 代码。那么 Angular 为什么还需要编译呢?在 Angular 中除了 TypeScript 之外,还有 HTML 模板文件,在这些模板文件里有 Angular 自带的组件、指令、管道等等,为了让浏览器可以识别和运行这些东西,那么就需要用 Angular 编译器把这些编译成浏览器可识别和运行的 es5 代码。
Angular 编译机制:JiT vs AoTAngular 的编译器有两种执行机制:JiT 和 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 编译器也不需要编译,直接运行这些代码就可以了。整个流程如下: