Angular 8 - 更小的包

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 可以得到详尽信息和指导。对于大多数开发者来说，只要下面的一个命令就可以完成此次升级：

1	`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 关键字来实现。

以前看起来是这样的：

1	`{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 new ，ng generate ，ng ad 和 ng update 同样的方式，我们发布了新的构建器 API，允许你利用 ng build ，ng test 和 ng run 来执行你期望的构建和发布。

请查阅 我们关于新 API 的博客

或者阅读：API 文档

我们还已经开始与云供应商合作来从这些 API 中获益。现在你可以尝试最新版本的 AngularFire ，它增加了一个 ng deploy 命令，使得构建和发布到 Firebase 比以前更加简单：

1 2	`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 到项目中，可以执行：

1	`ng generate webWorker my-worker`

一旦你有了 Web worker，你可以在应用程序中正常使用它，CLI 还可以帮助你打包并对它正确地进行代码分割。

1	`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

我们知道有大量的对于即将到来的可选预览的期待。我们将在下周的博客中进行单独更新，

分类: Angular,AngularJS,javascript,Web Front