本篇文章帶大家了解一下Angular中的新編譯引擎Ivy，介紹一下什么是Ivy編譯，開(kāi)啟Ivy編譯的方法。

Angular

Angular是目前全球最受歡迎的框架之一，但由于在框架中有許多庫(kù)以及編譯知識(shí)需要學(xué)習(xí)，在國(guó)內(nèi)的使用率并不高。同時(shí)由于加載時(shí)間長(zhǎng)，因?yàn)锳ngular生成的項(xiàng)目文件較大也被React以及Vue更優(yōu)秀的打包體積以及更好的開(kāi)發(fā)體驗(yàn)所打敗。

但如果掌握了Angular的原理之后，我們也能開(kāi)發(fā)出與React應(yīng)用性能所差無(wú)幾的Web App。而由于之前Angular 8.0版本之前使用的是View Engine編譯器來(lái)對(duì)Angular項(xiàng)目文件進(jìn)行編譯，造成了打包體積較大以及不容易追蹤bug。于是Angular團(tuán)隊(duì)推出了Ivy編譯器。【相關(guān)教程推薦：《angular教程》】

什么是Ivy編譯

Ivy是下一代模板編譯引擎以及渲染的管道工具，他非常先進(jìn)，并提供了以前沒(méi)有的高級(jí)功能以及更快的編譯速度。實(shí)際是Ivy是Angular之前渲染引擎的完全重寫(xiě)，具體來(lái)說(shuō)是第四次重寫(xiě)，使用Ivy可以獨(dú)立得編譯組件，同時(shí)對(duì)于熱更新也支持的更好，在重寫(xiě)編譯應(yīng)用程序時(shí)會(huì)只涉及編譯發(fā)生更改的組件。

下面是一個(gè)angular使用Ivy編譯前后的體積變化對(duì)比：

可以看出經(jīng)過(guò)Ivy的優(yōu)化，打包體積減少了不少。

treeshakable

同時(shí)Ivy另一個(gè)重要的點(diǎn)是對(duì)于項(xiàng)目文件的treeshaking，意思是在編譯打包過(guò)程中刪除未使用的代碼，這也可以通過(guò)一些工具如Rollup以及Uglify來(lái)完成。在構(gòu)建的過(guò)程中，treeshaking工具使用靜態(tài)分析消除未使用以及未引用的代碼。由于代碼的靜態(tài)分析依賴(lài)與引用，當(dāng)有條件的邏輯判斷代碼存在的時(shí)候，工具不能正確識(shí)別，會(huì)出現(xiàn)失敗的情況。

局部性

局部性指的是在使用本地代碼獨(dú)立的編譯每個(gè)組件的過(guò)程，通過(guò)對(duì)于修改部分的重編譯而不是整個(gè)項(xiàng)目文件的重新編譯來(lái)更快地構(gòu)建，這會(huì)顯著的提升構(gòu)建速度。在之前的Angular代碼中，每個(gè)組件都存在它的父信息，這就導(dǎo)致了編譯依賴(lài)，從而編譯的文件變多。而在Ivy中，每個(gè)組件只會(huì)生成關(guān)于該組件自身的信息，除去了可申明依賴(lài)項(xiàng)的名詞和包的名稱(chēng)。

Ivy編譯樣例

在Angular中嘗試編寫(xiě)如下代碼：

    <div>         <p>ivy works</p>         <app-child></app-child>     </div>

這里的app-child代表一個(gè)引用的子組件。通過(guò)Ivy編譯得到的Ivy.component.js如圖

而我們?cè)偻ㄟ^(guò)在未開(kāi)啟Ivy的條件下進(jìn)行再一次編譯，這一次得到如下的目錄結(jié)構(gòu)：

這里挑兩個(gè)主要的文件ivy.component.js和ivy.component.ngfactory.js來(lái)展示View Engine編譯后的文件

可以看到，編譯后的文件種類(lèi)以及代碼量相較于Ivy編譯都變多了不少。

AOT編譯和JIT編譯

Angular 應(yīng)用主要由組件及其 HTML 模板組成。組件是由Typescript語(yǔ)言編寫(xiě)以及使用裝飾器定義而成，由于瀏覽器無(wú)法直接理解 Angular 所提供的組件和模板，因此 Angular 應(yīng)用程序需要先進(jìn)行編譯才能在瀏覽器中運(yùn)行。

這里有一張angular的編譯過(guò)程圖示：

在瀏覽器下載和運(yùn)行代碼之前的編譯階段，Angular 預(yù)先（AOT）編譯器會(huì)先把你的 Angular HTML 和 TypeScript 代碼轉(zhuǎn)換成高效的 JavaScript 代碼。 在構(gòu)建期間編譯應(yīng)用可以讓瀏覽器中的渲染更快速。而在官方文檔中給出了使用AOT的部分原因：

• 更快的渲染
• 更少的異步請(qǐng)求
• 較小的 Angular 框架下載大小
• 盡早檢測(cè)模板錯(cuò)誤
• 更高的安全性( AOT 在將 HTML 模板和組件提供給客戶端之前就將其編譯為 JavaScript 文件。沒(méi)有要讀取的模板，沒(méi)有潛藏風(fēng)險(xiǎn)的客戶端 HTML 或 JavaScript eval，受到注入攻擊的機(jī)會(huì)就更少了。)

在早期的Angular8版本之前，Angular并沒(méi)有采用AOT編譯的方法，而是采用了JIT(即時(shí)編譯)編譯來(lái)生成應(yīng)用，它會(huì)在運(yùn)行期間在瀏覽器中編譯你的應(yīng)用。JIT編的一般步驟是、 首先將Typescript代碼（包括用戶編寫(xiě)的代碼，以及Angular框架、Angular編譯器代碼）編譯成JavaScript代碼。接著將這些代碼部署到服務(wù)器端然后瀏覽器發(fā)起請(qǐng)求下載代碼開(kāi)始執(zhí)行，接著Angular啟動(dòng)，Angular調(diào)用Angular編譯器。對(duì)于每個(gè)組件類(lèi)、ngModule、Pipe等都需要編譯，之前typescript代碼編譯為javascript代碼所保存的metadata，根據(jù)metadata編譯出瀏覽器可以執(zhí)行的Javascript代碼前面圖里的NgFactory文件。接著通過(guò)NgFactories文件來(lái)構(gòu)建整個(gè)應(yīng)用的具體組件。

這里有對(duì)AOT與JIT編譯詳解的文章：Angular編譯機(jī)制AOT和JIT

開(kāi)啟Ivy編譯

Ivy編譯默認(rèn)采用的是AOT編譯方法，在之前angular主要使用的都是JIT編譯，如果需要使用Ivy編譯，需要修改tsconfig.app.ts中添加angularCompilerOptions選項(xiàng)以及開(kāi)啟enableIvy。

{    "compilerOptions": { ... },   "angularCompilerOptions": {     "enableIvy": true   } }

其次要確認(rèn)的是angular配置文件angular.json中aot設(shè)置為true。

Ivy運(yùn)行時(shí)

新的運(yùn)行時(shí)引擎基于increnmental DOM的概念。這是一種使用指令表達(dá)和應(yīng)用更新到 DOM 樹(shù)的方法。DOM 更新是 Angular 中變化檢測(cè)的主要部分，因此這個(gè)概念可以方便地應(yīng)用到框架中。在在這篇文章中可以了解