Angular 8 发布

开放人生 發表於 2019-5-29 11:07:00

原文地址:https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27
<h1 class="md-end-block md-heading">Angular 8 - 更小的包，CLI API 以及与生态保持一致</h1>
Angular 8 现在发布了！这是跨越整个平台的重要发布，包括框架、Angular Material，与主版本同步的 CLI。该发布改进了应用程序在现代浏览器上的启动时间，提供了开发 CLI 的新的 API，保持了 Angular 与业界生态和更多新的 Web 标准的同步。
<h2 class="md-end-block md-heading">如何升级到版本 8</h2>
访问 update.angular.io 可以得到详尽信息和指导。对于大多数开发者来说，只要下面的一个命令就可以完成此次升级：
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;">ng update @angular/cli @angular/core
</pre>
</div>
　　
<h2 class="md-end-block md-heading">默认的区分加载</h2>
区分加载 是浏览器基于其自身的能力在现代或者遗留 JavaScript 之间选择的过程。现在，默认对你的应用程序执行现代的 ( es2015 ) 和遗留 ( es5 ) 构建，我们可以从中获取好处。当用户加载应用程序的时候，它们可以自动使用需要的构建包。
如果你使用 <code>ng update</code> 命令，我们会升级你的 <code>tsconfig.json</code> 来帮助你从中获益。我们的 CLI 会检查你的 <code>tsconfig.json</code> 中的 <code>target</code> JavaScript 等级来决定是否从区分加载中获益。
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">{
"compilerOptions": {
…
"module": "esnext",
"moduleResolution": "node",
…
"target": "es2015",
…
},
</pre>
</div>
当 <code>target</code> 设置为 <code>es2015</code> 的时候，我们会生成并标记两种发布包。
在运行时，浏览器使用在 <code><script></code> 元素上的 attribute 来加载正确的包。
<ul class="ul-list" data-mark="*">
<li class="md-list-item">
<code><script type="module" src="..."></code> 加载现代版的 JavaScript
</li>
<li class="md-list-item">
<code><script nomodule src="..."></code> 加载遗留版的 Javascript
</li>
</ul>
对于 angular.io 来说，对于现代浏览器，我们的初始化包节省了超过 40Kb 尺寸。通过来自社区的反馈，我们听到了应用程序通常节省了 7 - 20% 的尺寸，基于现代 JavaScript 的特性获取了增益。
 
<h2 class="md-end-block md-heading">使用动态导入的路由配置</h2>
我们强烈建议使用 <code>router</code> 延迟加载应用程序的各个部分。这可以通过在路由配置中使用 <code>loadChildren</code> 关键字来实现。
以前看起来是这样的：
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}
</pre>
</div>
　　
该语法是 Angular 定制语法，与工具链构建在一起。在 Angular 8 中，我们迁移到了工业标准的 dyanmic imports。
现在，这样使用：
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">{
path: `/admin`,
loadChildren: () => import(`./admin/admin.module`)
.then(m => m.AdminModule)
}
</pre>
</div>
　　
<h2 class="md-end-block md-heading">CLI 中的构建器 API</h2>
与 Schematics 允许你利用 <code>ng new</code> ，<code>ng generate</code> ，<code>ng ad</code> 和 <code>ng update</code> 同样的方式，我们发布了新的构建器 API，允许你利用 <code>ng build</code> ，<code>ng test</code> 和 <code>ng run</code> 来执行你期望的构建和发布。
请查阅 <code>我们关于新 API 的博客</code>
或者阅读：<code>API 文档</code>
我们还已经开始与云供应商合作来从这些 API 中获益。现在你可以尝试最新版本的 AngularFire ，它增加了一个 <code>ng deploy</code> 命令，使得构建和发布到 Firebase 比以前更加简单：
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;">ng add @angular/fire
ng run my-app:deploy
</pre>
</div>
　　
一旦安装之后，部署命令将通过 AngularFire 同时进行构建和发布应用程序。
<h2 class="md-end-block md-heading">CLI 中的工作区 API</h2>
以前使用 Schematics 的开发者不得不手动大龄和修改他们的 <code>angular.json</code> 文件来修改工作区配置。使用 8.0，我们引入了一个新的 API 使得该文件更易读和修改。
请参考 Workspace API
<h2 class="md-end-block md-heading">Web Worker 支持</h2>
如果你需要做任何 CPU 密集的处理的时候，Web worker 是加速应用程序的非常棒的途径。Web worker 允许你将工作转移到后台线程上，比如图像或者视频处理，我们在 angular.io 中使用 Web worker 进行应用内的搜索索引。
现在，你可以通过 CLI 来生成一个 Web worker。添加 worker 到项目中，可以执行：
<div class="cnblogs_Highlighter">
<pre class="brush:bash;gutter:true;">ng generate webWorker my-worker
</pre>
</div>
　　
一旦你有了 Web worker，你可以在应用程序中正常使用它，CLI 还可以帮助你打包并对它正确地进行代码分割。
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">const worker = new Worker('./my-worker.worker', { type: 'module'} );
</pre>
</div>
　　
请阅读 web worker in the Angular CLI
<h2 class="md-end-block md-heading">AngularJS 迁移改进</h2>
如果你在 AngularJS 应用程序中使用了 $location service，Angular 现在提供了 <code>LocationUpgradeModule</code> ，允许将 Location 服务统一从 AngularJS 的 $location 切换到 Angular 的 <code>Location</code> 服务。这应该可以改进需要在应用程序中同时使用 AngularJS 和 Angular 的应用程序。
请查阅 Unified Angular Location Service
我们还提供了关于在 Angular 中延迟加载 AngularJS 应用部分的最佳实践文档，首先使得常见使用的功能容易迁移，你的应用程序仅仅加载 AngularJS 的子集。
请查阅 Lazy Loading AngularJS
<h2 class="md-end-block md-heading">新的不建议使用手册</h2>
我们提供更高等级的跨主要版本的维护语义版本稳定性。对于我们的 Public API，我们提供 N + 2 支持。这意味着如果一个特性从 8.1 开始不建议使用，我们将在下两个主要版本继续支持 ( 9 和 10 ) 。例如，我们在版本 8 中不建议的 platform-webworker。
我们在使得在 Angular 中更容易发现不建议使用的内容并删除它。对于所有不建议使用的功能列表，请查阅新的 不建议使用手册
<h2 class="md-end-block md-heading">Ivy & Bazel</h2>
我们知道有大量的对于即将到来的可选预览的期待。我们将在下周的博客中进行单独更新，
  
来源：https://www.cnblogs.com/haogj/p/10942551.html

頁: [1]

琼殿技术论坛's Archiver

Angular 8 发布