?局長(zhǎng)
?發(fā)布于 2019年05月29日
Angular 團(tuán)隊(duì)今天宣布推出 Angular 8 正式版。
作為一個(gè)期待已久的重大版本更新，Angular 8 為框架、Angular Material 和命令行界面工具?Angular CLI 帶來(lái)了大量的改進(jìn)和新功能。
團(tuán)隊(duì)表示 Angular 8 顯著減少了在現(xiàn)代瀏覽器中應(yīng)用程序的啟動(dòng)時(shí)間、提供了用于定制?CLI 的新 API，并讓 Angular 與生態(tài)系統(tǒng)以及更多的 Web 標(biāo)準(zhǔn)保持一致。
下面繼續(xù)看看?Angular 8 中值得關(guān)注的新特性。
新特性
默認(rèn)啟用差異化加載（Differential loading）
所謂差異化加載就是瀏覽器會(huì)根據(jù)自己的狀態(tài)在現(xiàn)代和舊版本的 JavaScript 之間進(jìn)行選擇的過(guò)程。在 Angular 8 中，我們可以通過(guò)為應(yīng)用程序執(zhí)行現(xiàn)代構(gòu)建（es2015+）和舊版構(gòu)建（es5）來(lái)默認(rèn)使用此功能。
具體來(lái)說(shuō)就是，作為構(gòu)建過(guò)程的一部分，Angular CLI 將會(huì)分別生成現(xiàn)代（ES2015+）和舊版（ES5）構(gòu)建的 JavaScript 捆綁包，當(dāng)用戶加載應(yīng)用程序時(shí)，客戶端會(huì)進(jìn)行差異化加載，他們將自動(dòng)獲得所需的捆綁包。
差異化加載可顯著提升現(xiàn)代瀏覽器的加載速度和傳輸間隔時(shí)間（TTI），亦即意味著支持 ES2015 的瀏覽器將能夠下載更小、更高效的捆綁包，當(dāng)然這些包的加載速度和渲染速度都比以往更快。
這項(xiàng)工作主要基于 Manfred Steyer 的ngx-build-modern項(xiàng)目，與 Manfred 共同合作開(kāi)發(fā)。
上圖是 Angular 團(tuán)隊(duì)提供的數(shù)據(jù)，angular.io網(wǎng)站為現(xiàn)代瀏覽器節(jié)省了超過(guò) 40kB 的捆綁包大小。每個(gè)網(wǎng)站的數(shù)據(jù)當(dāng)然會(huì)有差異，主要取決于采用了多少現(xiàn)代的 JavaScript 特性。
新的渲染引擎 Ivy
作為新的渲染引擎，Ivy 旨在徹底縮減代碼尺寸并增強(qiáng)系統(tǒng)靈活性。與目前的 Angular View Engine 相比，Ivy 具有以下優(yōu)勢(shì)：
通過(guò) Angular 編譯器生成的代碼更具可讀性，更易調(diào)試
更快的重建速度
有效減少負(fù)載大小，瀏覽器用于下載和解析應(yīng)用程序的時(shí)間將更短
更好的模板類型檢查，以便在項(xiàng)目構(gòu)建初期就可捕獲更多 Bug
優(yōu)秀的向后兼容性
使用動(dòng)態(tài)導(dǎo)入進(jìn)行路由配置
在 Angular 8 中，我們可以使用路由以延遲加載部分應(yīng)用程序，這是通過(guò)在路由配置中使用 loadChildren 鍵來(lái)實(shí)現(xiàn)的。
在之前的版本中會(huì)編寫如下的代碼：
{path:'/admin',loadChildren:'./admin/admin.module#AdminModule'}
這種語(yǔ)法是專門為 Angular 定制的，并內(nèi)置到其工具鏈中。但 Angular 8 將逐漸往行業(yè)標(biāo)準(zhǔn)靠攏 —— 使用了動(dòng)態(tài)導(dǎo)入的方式（dynamic imports）。
所以代碼會(huì)像下面這樣：
{path:`/admin`,loadChildren:()=>import(`./admin/admin.module`).then(m=>m.AdminModule)}
這將改進(jìn)對(duì) VSCode 和 WebStorm 等開(kāi)發(fā)工具的支持，可以更好理解和驗(yàn)證這些導(dǎo)入。
對(duì)?Web Worker 的支持
可能有不少開(kāi)發(fā)者對(duì)于?Web Worker 不太熟悉，簡(jiǎn)單來(lái)說(shuō)就是，開(kāi)發(fā)者可通過(guò) Web Worker 編寫運(yùn)行在主線程之外的代碼（例如對(duì)圖像和視頻的操作），以此提升應(yīng)用程序的運(yùn)行速度和并行性。
Web Worker 是前端開(kāi)發(fā)中的一項(xiàng)重要?jiǎng)?chuàng)新。在此之前，所有 Web 應(yīng)用程序只能使用單線程。而隨著 Web Worker 的出現(xiàn)，可以將 CPU 分配到單獨(dú)的硬件線程中，使瀏覽器環(huán)境擁有多線程，從而提升項(xiàng)目開(kāi)發(fā)效率。
在 Angular 8 之前，使用 Web Worker 存在這樣的問(wèn)題：在 worker 中運(yùn)行的代碼不能與應(yīng)用程序的其余部分位于同一 JavaScript 腳本文件中，它必須是分開(kāi)的。因此，對(duì)于曾經(jīng)希望借助 Angular CLI 等工具，自動(dòng)將 JavaScript 文件拆分、綁定到更少文件夾下的效果往往不佳。
Angular 8 的新特性之一就是改進(jìn)了使用 Angular CLI 捆綁 WebWorker?的支持，這項(xiàng)改進(jìn)意味著我們將走向多并發(fā)、自動(dòng)化的 Web Worker 之路。
示例代碼：
constworker =newWorker(`./my-worker.worker`, {type:`module`});
改進(jìn)從 AngularJS 遷移至新版本的過(guò)程
屬于 AngularJS（Angular 1.x 系列）的時(shí)代已經(jīng)過(guò)去，雖然現(xiàn)在還能接收到團(tuán)隊(duì)的 bug 修復(fù)補(bǔ)丁，但不會(huì)再有任何更新。官方也在積極支持從 Angular 1.x 升級(jí)到更新的版本。
Angular Router 添加了向后兼容模式，以降低大型項(xiàng)目的升級(jí)成本。Angular Router 可以使用 $route APIs 延遲加載部分 AngularJS 應(yīng)用程序，從而更容易地升級(jí)到 Angular。
目前仍有大量的企業(yè)在使用?AngularJS，他們沒(méi)有升級(jí)的原因也很簡(jiǎn)單，這些應(yīng)用運(yùn)行良好，并且在重構(gòu)時(shí)無(wú)需太多投入。不過(guò)對(duì)于使用?AngularJS 進(jìn)行大型開(kāi)發(fā)的團(tuán)隊(duì)，現(xiàn)在正是升級(jí)的最佳時(shí)間。
Angular 8 不止帶來(lái)了很多令人稱贊的新功能，性能方面的改進(jìn)也是一大亮點(diǎn)。與 Angular 7 相比，耗費(fèi)的時(shí)間變得更短。
那么問(wèn)題來(lái)了，各位準(zhǔn)備什么時(shí)候升級(jí)到 Angular 8 呢？
