Angular 8 發布


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

Angular 8 - 更小的包,CLI API 以及與生態保持一致

Angular 8 現在發布了!這是跨越整個平台的重要發布,包括框架、Angular Material,與主版本同步的 CLI。該發布改進了應用程序在現代瀏覽器上的啟動時間,提供了開發 CLI 的新的 API,保持了 Angular 與業界生態和更多新的 Web 標准的同步。

如何升級到版本 8

訪問 update.angular.io 可以得到詳盡信息和指導。對於大多數開發者來說,只要下面的一個命令就可以完成此次升級:

ng update @angular/cli @angular/core

  

默認的區分加載

區分加載 是瀏覽器基於其自身的能力在現代或者遺留 JavaScript 之間選擇的過程。現在,默認對你的應用程序執行現代的 ( es2015 ) 和 遺留 ( es5 ) 構建,我們可以從中獲取好處。當用戶加載應用程序的時候,它們可以自動使用需要的構建包。

如果你使用 ng update 命令,我們會升級你的 tsconfig.json 來幫助你從中獲益。我們的 CLI 會檢查你的 tsconfig.json 中的 target JavaScript 等級來決定是否從區分加載中獲益。

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

target 設置為 es2015 的時候,我們會生成並標記兩種發布包。

在運行時,瀏覽器使用在 <script> 元素上的 attribute 來加載正確的包。

  • <script type="module" src="..."> 加載現代版的 JavaScript

  • <script nomodule src="..."> 加載遺留版的 Javascript

對於 angular.io 來說,對於現代瀏覽器,我們的初始化包節省了超過 40Kb 尺寸。通過來自社區的反饋,我們聽到了應用程序通常節省了 7 - 20% 的尺寸,基於現代 JavaScript 的特性獲取了增益。

 

使用動態導入的路由配置

我們強烈建議使用 router 延遲加載應用程序的各個部分。這可以通過在路由配置中使用 loadChildren 關鍵字來實現。

以前看起來是這樣的:

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

  

該語法是 Angular 定制語法,與工具鏈構建在一起。在 Angular 8 中,我們遷移到了工業標准的 dyanmic imports

現在,這樣使用:

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

  

CLI 中的構建器 API

與 Schematics 允許你利用 ng newng generateng adng update 同樣的方式, 我們發布了新的構建器 API,允許你利用 ng buildng testng run 來執行你期望的構建和發布。

請查閱 我們關於新 API 的博客

或者閱讀:API 文檔

我們還已經開始與雲供應商合作來從這些 API 中獲益。現在你可以嘗試最新版本的 AngularFire ,它增加了一個 ng deploy 命令,使得構建和發布到 Firebase 比以前更加簡單:

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

  

一旦安裝之后,部署命令將通過 AngularFire 同時進行構建和發布應用程序。

CLI 中的工作區 API

以前使用 Schematics 的開發者不得不手動大齡和修改他們的 angular.json 文件來修改工作區配置。使用 8.0,我們引入了一個新的 API 使得該文件更易讀和修改。

請參考 Workspace API

Web Worker 支持

如果你需要做任何 CPU 密集的處理的時候,Web worker 是加速應用程序的非常棒的途徑。Web worker 允許你將工作轉移到后台線程上,比如圖像或者視頻處理,我們在 angular.io 中使用 Web worker 進行應用內的搜索索引。

現在,你可以通過 CLI 來生成一個 Web worker。添加 worker 到項目中,可以執行:

ng generate webWorker my-worker

  

一旦你有了 Web worker,你可以在應用程序中正常使用它,CLI 還可以幫助你打包並對它正確地進行代碼分割。

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

  

請閱讀 web worker in the Angular CLI

AngularJS 遷移改進

如果你在 AngularJS 應用程序中使用了 $location service,Angular 現在提供了 LocationUpgradeModule ,允許將 Location 服務統一從 AngularJS 的 $location 切換到 Angular 的 Location 服務。 這應該可以改進需要在應用程序中同時使用 AngularJS 和 Angular 的應用程序。

請查閱 Unified Angular Location Service

我們還提供了關於在 Angular 中延遲加載 AngularJS 應用部分的最佳實踐文檔,首先使得常見使用的功能容易遷移,你的應用程序僅僅加載 AngularJS 的子集。

請查閱 Lazy Loading AngularJS

新的不建議使用手冊

我們提供更高等級的跨主要版本的維護語義版本穩定性。對於我們的 Public API,我們提供 N + 2 支持。這意味着如果一個特性從 8.1 開始不建議使用,我們將在下兩個主要版本繼續支持 ( 9 和 10 ) 。例如,我們在版本 8 中不建議的 platform-webworker。

我們在使得在 Angular 中更容易發現不建議使用的內容並刪除它。對於所有不建議使用的功能列表,請查閱新的 不建議使用手冊

Ivy & Bazel

我們知道有大量的對於即將到來的可選預覽的期待。我們將在下周的博客中進行單獨更新,

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM