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

Angular

Angular是目前全球最受歡迎的框架之一，但由于在框架中有許多庫以及編譯知識需要學習，在國內的使用率并不高。同時由于加載時間長，因為Angular生成的項目文件較大也被React以及Vue更優(yōu)秀的打包體積以及更好的開發(fā)體驗所打敗。

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

什么是Ivy編譯

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

下面是一個angular使用Ivy編譯前后的體積變化對比：

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

treeshakable

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

局部性

局部性指的是在使用本地代碼獨立的編譯每個組件的過程，通過對于修改部分的重編譯而不是整個項目文件的重新編譯來更快地構建，這會顯著的提升構建速度。在之前的Angular代碼中，每個組件都存在它的父信息，這就導致了編譯依賴，從而編譯的文件變多。而在Ivy中，每個組件只會生成關于該組件自身的信息，除去了可申明依賴項的名詞和包的名稱。

Ivy編譯樣例

在Angular中嘗試編寫如下代碼：

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

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

而我們再通過在未開啟Ivy的條件下進行再一次編譯，這一次得到如下的目錄結構：

這里挑兩個主要的文件ivy.component.js和ivy.component.ngfactory.js來展示View Engine編譯后的文件

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

AOT編譯和JIT編譯

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

這里有一張angular的編譯過程圖示：

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

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

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

這里有對AOT與JIT編譯詳解的文章：Angular編譯機制AOT和JIT

開啟Ivy編譯

Ivy編譯默認采用的是AOT編譯方法，在之前angular主要使用的都是JIT編譯，如果需要使用Ivy編譯，需要修改tsconfig.app.ts中添加angularCompilerOptions選項以及開啟enableIvy。

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

其次要確認的是angular配置文件angular.json中aot設置為true。

Ivy運行時

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