Angular中怎么開啟Ivy編譯

Angular中怎么開啟Ivy編譯，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

Angular

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

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

什么是Ivy編譯

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

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

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

treeshakable

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

局部性

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

Ivy編譯樣例

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

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

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

而我們再通過在未開啟Ivy的條件下進(jìn)行再一次編譯，這一次得到如下的目錄結(jié)構(gòu)：

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

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

AOT編譯和JIT編譯

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

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

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

• 更快的渲染

• 更少的異步請求

• 較小的 Angular 框架下載大小

• 盡早檢測模板錯(cuò)誤

• 更高的安全性( AOT 在將 HTML 模板和組件提供給客戶端之前就將其編譯為 JavaScript 文件。沒有要讀取的模板，沒有潛藏風(fēng)險(xiǎn)的客戶端 HTML 或 JavaScript eval，受到注入攻擊的機(jī)會就更少了。)

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

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

開啟Ivy編譯

Ivy編譯默認(rèn)采用的是AOT編譯方法，在之前angular主要使用的都是JIT編譯，如果需要使用Ivy編譯，需要修改tsconfig.app.ts中添加angularCompilerOptions選項(xiàng)以及開啟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 樹的方法。DOM 更新是 Angular 中變化檢測的主要部分，因此這個(gè)概念可以方便地應(yīng)用到框架中。在在這篇文章中可以了解更多關(guān)于它的內(nèi)容，它解釋了這個(gè)概念背后的推理，并將它與React 中的Virtual DOM進(jìn)行了對比。增量 DOM 也恰好是一個(gè)庫，但是新的 Ivy 引擎沒有使用它，而是實(shí)現(xiàn)了自己的增量DOM版本。

在之前Angular的主要實(shí)現(xiàn)邏輯是實(shí)例化組件、創(chuàng)建DOM節(jié)點(diǎn)以及進(jìn)行更改檢測，而這個(gè)整體是通過一個(gè)很小的原子單元實(shí)現(xiàn)的(atomic unit)。編譯器只是生成有關(guān)的組件以及組件中定義元素的元數(shù)據(jù)meta data。如下圖

而新的Ivy引擎下的步驟如下：

可與看出模板指令是實(shí)例化組件、創(chuàng)建 DOM 節(jié)點(diǎn)和運(yùn)行變更檢測的邏輯所在。但是它已經(jīng)從整體的解釋器轉(zhuǎn)移到了單個(gè)的指令中。而Ivy帶來的另一個(gè)優(yōu)點(diǎn)是對于變更檢測(change detection)的調(diào)試。新的Ivy編譯環(huán)境下可以直接在模板函數(shù)中放置斷點(diǎn)即可調(diào)試組件的變更檢測。

新的編譯器還會將一組獨(dú)立的Typescript類轉(zhuǎn)換編譯為表示Class組件的的AST。這些轉(zhuǎn)換都會被實(shí)現(xiàn)為一種純函數(shù)，這個(gè)函數(shù)接受表示裝飾器的元數(shù)據(jù)meta data并將該定義作為靜態(tài)字段添加到組件類中。

看完上述內(nèi)容，你們掌握Angular中怎么開啟Ivy編譯的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！