熱門的前端網頁程式開發框架釋出最新版本Angular 8.0,Angular新的編譯器Ivy,從這個版本開始算是正式加入,官方直接提供了啟用的選項,另外,還改善了應用程式在瀏覽器中的啟動時間,也加入差異化載入功能,依瀏覽器支援的功能載入不同版本的程式碼。

Ivy編譯器是現在Angular框架的開發重點,開發團隊重寫了從Angular 4以來的編譯器。多數Javascript框架的角色就是一個編譯器,Angular也不例外,當開發者以TypeScript開發元件,使用了以Angular模板語法強化的HTML,這些HTML最終並不會被瀏覽器執行,因為Angular會將其轉換成JavaScript。當元件出現在頁面的時候,JavaScript會產生對應的DOM,並且在狀態改變時更新元件。

Angular編譯器的重要工作,就是將所有的HTML轉成JavaScript程式碼,這個編譯器在去年開始進行重寫稱為Ivy,Ivy是Angular框架的大進展,因為不需要開發者改變撰寫Angular應用程式的方式,只透過改變框架內部運作的方式,就能讓應用程式得以進行平行運算,並提供漸增渲染。

Ivy具體好處包括利用漸增編譯技術,提升建置的速度;而由於程式碼生成與樹搖(Tree-shaking)技術更加緊密結合,因此建置後的應用程式容量下降;最大亮點則是提供了更好的擴展性,開發團隊可以為Angular加入元件延遲載入、元程式開發(Metaprogramming)或是不基於zone.js的變更偵測系統等新功能。

不過,雖然Ivy有許多發展的可能性,但在Angular 8.0中,首要目的還是維持現有應用程式正常運作,Angular 8.0是Ivy正式加入的第一個版本,開發者可以啟用Ivy,以測試應用程式的運作狀況,而開發團隊也預計在Angular 9,預設啟用Ivy編譯器。

Angular 8.0還加入了差異化載入(Differential Loading)功能,現在瀏覽器可以根據支援的功能,載入新版或是舊版的JavaScript程式碼,新舊之分在於應用程式使用ES6,還是ES5的ECMAScript版本建置,Angular 8.0讓開發者準備兩組同捆包,當使用者載入應用程式的時候,瀏覽器會自動獲得需要的同捆包(Bundle)。這個功能不需要伺服器端或是任何的基礎設施變更。官方提出數據,根據應用程式使用到的新穎JavaScript功能數量,能夠節省7-20%同捆包容量。


Advertisement

更多 iThome相關內容