Angular 8更新功能纪要

[deepthan]

Angular 8更新功能纪要

需要提前了解的知识

• 差异加载
• 动态导入

1. 默认进行差异加载

差异加载是浏览器根据自己的能力来选择加载新式或旧式 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 功能

2. 路径配置使用动态导入

我们强烈建议用户使用路由懒加载应用的一些部分。可以在路由配置中使用 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 将自动更新代码以应用新方式。

3. 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 建议的方式构建和部署你的应用程序。

4. CLI 中的 Workspace API

以前，使用 Schematics 的开发者必须手动打开并修改 angular.json 来更改 workspace 配置。在 8.0 版本中我们引入了一个新的 API，使开发者能更容易地读取和修改这个文件。

在此查阅有关可用的 Workspace API 更多信息

5. 支持 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 的更多信息