Angular 團隊今天宣佈推出 Angular 8 正式版。
作為一個期待已久的重大版本更新,Angular 8 為框架、Angular Material 和命令列介面工具 Angular CLI 帶來了大量的改進和新功能。
團隊表示 Angular 8 顯著減少了在現代瀏覽器中應用程式的啟動時間、提供了用於定製 CLI 的新 API,並讓 Angular 與生態系統以及更多的 Web 標準保持一致。
下麵繼續看看 Angular 8 中值得關註的新特性。
新特性
預設啟用差異化載入(Differential loading)
所謂差異化載入就是瀏覽器會根據自己的狀態在現代和舊版本的 JavaScript 之間進行選擇的過程。在 Angular 8 中,我們可以透過為應用程式執行現代構建(es2015+)和舊版構建(es5)來預設使用此功能。
具體來說就是,作為構建過程的一部分,Angular CLI 將會分別生成現代(ES2015+)和舊版(ES5)構建的 JavaScript 捆綁包,當使用者載入應用程式時,客戶端會進行差異化載入,他們將自動獲得所需的捆綁包。
差異化載入可顯著提升現代瀏覽器的載入速度和傳輸間隔時間(TTI),亦即意味著支援 ES2015 的瀏覽器將能夠下載更小、更高效的捆綁包,當然這些包的載入速度和渲染速度都比以往更快。
這項工作主要基於 Manfred Steyer 的 ngx-build-modern 專案,與 Manfred 共同合作開發。
上圖是 Angular 團隊提供的資料,angular.io 網站為現代瀏覽器節省了超過 40kB 的捆綁包大小。每個網站的資料當然會有差異,主要取決於採用了多少現代的 JavaScript 特性。
新的渲染引擎 Ivy
作為新的渲染引擎,Ivy 旨在徹底縮減程式碼尺寸並增強系統靈活性。
與目前的 Angular View Engine 相比,Ivy 具有以下優勢:
- 透過 Angular 編譯器生成的程式碼更具可讀性,更易除錯
- 更快的重建速度
- 有效減少負載大小,瀏覽器用於下載和解析應用程式的時間將更短
- 更好的模板型別檢查,以便在專案構建初期就可捕獲更多 Bug
- 優秀的向後相容性
使用動態匯入進行路由配置
在 Angular 8 中,我們可以使用路由以延遲載入部分應用程式,這是透過在路由配置中使用 loadChildren 鍵來實現的。
在之前的版本中會編寫如下的程式碼:
{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}
這種語法是專門為 Angular 定製的,並內建到其工具鏈中。但 Angular 8 將逐漸往行業標準靠攏 —— 使用了動態匯入的方式(dynamic imports)。
所以程式碼會像下麵這樣:
{path: `/admin`, loadChildren: () =>
import(`./admin/admin.module`).then(m => m.AdminModule)}
這將改進對 VSCode 和 WebStorm 等開發工具的支援,可以更好理解和驗證這些匯入。
對 Web Worker 的支援
可能有不少開發者對於 Web Worker 不太熟悉,簡單來說就是,開發者可透過 Web Worker 編寫執行在主執行緒之外的程式碼(例如對影象和影片的操作),以此提升應用程式的執行速度和並行性。
Web Worker 是前端開發中的一項重要創新。在此之前,所有 Web 應用程式只能使用單執行緒。而隨著 Web Worker 的出現,可以將 CPU 分配到單獨的硬體執行緒中,使瀏覽器環境擁有多執行緒,從而提升專案開發效率。
在 Angular 8 之前,使用 Web Worker 存在這樣的問題:在 worker 中執行的程式碼不能與應用程式的其餘部分位於同一 JavaScript 指令碼檔案中,它必須是分開的。因此,對於曾經希望藉助 Angular CLI 等工具,自動將 JavaScript 檔案拆分、系結到更少檔案夾下的效果往往不佳。
Angular 8 的新特性之一就是改進了使用 Angular CLI 捆綁 WebWorker 的支援,這項改進意味著我們將走向多併發、自動化的 Web Worker 之路。
示例程式碼:
const worker = new Worker(`./my-worker.worker`, { type: `module` });
改進從 AngularJS 遷移至新版本的過程
屬於 AngularJS(Angular 1.x 系列)的時代已經過去,雖然現在還能接收到團隊的 bug 修複補丁,但不會再有任何更新。官方也在積極支援從 Angular 1.x 升級到更新的版本。
Angular Router 添加了向後相容樣式,以降低大型專案的升級成本。Angular Router 可以使用 $route APIs 延遲載入部分 AngularJS 應用程式,從而更容易地升級到 Angular。
目前仍有大量的企業在使用 AngularJS,他們沒有升級的原因也很簡單,這些應用執行良好,並且在重構時無需太多投入。不過對於使用 AngularJS 進行大型開發的團隊,現在正是升級的最佳時間。
Angular 8 不止帶來了很多令人稱贊的新功能,效能方面的改進也是一大亮點。與 Angular 7 相比,應用程式的啟動時間變得更短,耗費的花銷也更低。
那麼問題來了,各位準備什麼時候升級到 Angular 8 呢?
朋友會在“發現-看一看”看到你“在看”的內容