Angular重大版本升級: 8.0正式發佈!支持更多Web標準

Angular 8.0.0版本正式發佈了!8.0是重大版本升級,整個平臺,包括框架、Angular Material和CLI都同步升級到了新版。Angular 8.0版縮短了應用在現代瀏覽器上的啓動時間,提供了用於訪問CLI的新API,並使Angular支持更多Web標準,追上了Web生態的前沿發展趨勢。

如何更新到Angular 8.0.0版本

用戶可以訪問update.angular.io以獲取新版詳細信息和升級指導,大多數開發者可以使用以下命令開始更新:

ng update @angular/cli @angular/core

默認進行差異加載

差異加載是瀏覽器根據自己的能力來選擇加載新式或舊式JavaScript的過程。現在我們默認開啓此功能,爲應用提供新版構建(es2015)和老式構建(es5)。這樣當用戶加載應用時將自動獲得所需的包。

如果你使用的是ng update,Angular會更新你的tsconfig.json以加入此功能。Angular的CLI會查看tsconfig.json中的target JS級別,以判斷是否啓用差異加載功能。

{
  "compilerOptions": {
  …
  "module": "esnext",
  "moduleResolution": "node",
  …
  "target": "es2015",
  …
},

當target設置爲es2015時,Angular會生成並標記兩個包。

運行時,瀏覽器使用腳本標記上的屬性來加載正確的包。

<script type =“module”src =“...”> //新版JS
<script nomodule src =“...”> //老式JS

在angular.io上,爲現代瀏覽器節省了超過40kB的初始包大小。根據社區反饋,應用程序通常可以節省7-20%的捆綁包大小,具體取決於用戶使用了多少新版JavaScript功能。

angular.io上的包大小縮小了大約41KB

在此處查閱有關差異加載的詳細信息

路徑配置使用動態導入

我們強烈建議用戶使用路由懶加載應用的一些部分。可以在路由配置中使用loadChildren鍵啓用此功能。

舊版是這樣的:

{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}

這種語法是爲Angular定製的,並內置到了我們的工具鏈中。在新版8.0中我們換成了符合行業標準的動態導入

新版變成了:

{path: `/admin`, loadChildren: () => import(`./admin/admin.module`).then(m => m.AdminModule)}

這將改善VSCode和WebStorm等編輯器對Angular的支持能力,現在它們就能正確理解併爲用戶驗證這些導入了。

如果你使用的是ng update,Angular將自動更新代碼以應用新方式。

CLI中的構建器API

就像Schematics能讓你輸入ng new、ng generate、ng add和ng update一樣,我們發佈的新版構建器API能讓你輸入ng build、ng test和ng run來執行構建和部署等任務。

可以查看介紹這些新API的博客文章,或查閱API文檔

我們也在與雲服務商合作以利用這些API。現在你可以試一下最新版本的AngularFire,它增加了一個deploy命令,讓構建和部署到Firebase的工作變得非常簡單:

ng add @angular/fire
ng run my-app:deploy

安裝AngularFire後,這個部署命令將以AngularFire建議的方式構建和部署你的應用程序。

CLI中的Workspace API

以前,使用Schematics的開發者必須手動打開並修改angular.json來更改workspace配置。在8.0版本中我們引入了一個新的API,使開發者能更容易地讀取和修改這個文件。

在此查閱有關可用的Workspace API 更多信息

支持Web Worker

如果你需要運行一些CPU密集任務,使用Web Workers就能很好地加快應用的運行速度。使用Web Workers可以將諸如圖像或視頻操作之類的任務掛載到後臺線程。我們在angular.io上使用Web Workers進行應用內搜索索引。

你現在可以從CLI生成新的Web Workers,要將新生成的worker添加到項目中,只需運行:

ng generate webWorker my-worker

添加了Web Workers後就可以在應用程序中正常使用了,CLI能正確地綁定並拆分它的代碼:

const worker = new Worker(`./my-worker.worker`, { type: `module` });

可在此查閱關於Angular CLI中Web Workers的更多信息

AngularJS遷移改進

如果你在AngularJS應用中使用$location服務,Angular現在有了一個LocationUpgradeModule提供統一的位置服務,將定位任務從AngularJS $location服務遷移到了Angular Location服務上。這會改善使用ngUpgrade,需要在AngularJS和Angular部分中來回切換的應用的表現。

在此查閱有關統一的Angular位置服務的更多信息

我們還記錄了從Angular中懶加載應用中AngularJS部分的最佳實踐,這樣就能更容易地遷移最常用的功能,並且只爲應用程序的子集加載AngularJS。

在此查閱關於懶加載AngularJS的更多信息

新的棄用指南

Angular的重大版本都是高度穩定的,每個重大版本都會對語義版本做一致管理。對於公共API而言,我們對舊功能的支持週期是N+2版本,意味着8.1中不推薦使用的功能將繼續在下兩個重大版本(9和10)中得到支持。例如,我們在8.0中棄用了platform-webworker功能。

現在用戶更容易在Angular中找到棄用和刪除的功能說明。查閱新的棄用指南瞭解所有棄用功能的完整列表

英文原文:https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章