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

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