原文地址: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

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

转载于:https://www.cnblogs.com/haogj/p/10942551.html

Angular 8 发布相关推荐

  1. 小米否认“造车”;微软中国回应关闭实体直营店;Angular 10 发布 | 极客头条...

    整理 | 屠敏 头图 | CSDN 下载自东方 IC 快来收听极客头条音频版吧,智能播报由出门问问「魔音工坊」提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极 ...

  2. Angular cli 发布自定义组件

    建立工作空间 ng new Test --style=scss //Angular6.x及以下可以使用这个命令指定使用.scss样式表 ng new Test                      ...

  3. Angular vs React 最全面深入对比

    如今,Angular和React这两个JavaScript框架可谓红的发紫,同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题,本文或许无法告诉你哪个框架更优秀,但尽量从更多的角 ...

  4. Angular8 - 稳定版修改概述(Angular 8的新特性介绍)

    Angular 8的新特性介绍 在之前Angular团队发布了8.0.0稳定版.其实早在NgConf 2019大会上,演讲者就已经提及了从工具到差分加载的许多内容以及更多令人敬畏的功能.下面是我对8. ...

  5. Angular Package Format (APF) v12.0 介绍

    官网 本文档描述了 npm 上当前可用的 Angular 框架包的结构和格式. 这种格式适用于分发 Angular 组件的包(如 Angular Material)以及在@angular 命名空间下发 ...

  6. 第一章、第一节 Angular基础

    第一章.第一节 Angular基础 让我们先来看看Angular是如何实现组件模式的. 组件模式 Angular 应用程序使用组件模式.你可能听说过这个模式,它不仅用于软件开发,还用于制造.建筑和其他 ...

  7. 【华为云技术分享】三大前端技术(React,Vue,Angular)探密(下)

    [华为云技术分享]三大前端技术(React,Vue,Angular)探密(上) [Angular] Angular(通常被称为 "Angular 2+"或 "Angula ...

  8. 移动应用框架 Ionic 4 正式版发布:Ionic for Everyone

    流行的开源移动应用程序开发框架 Ionic 于今日发布了 4.0 正式版,代号 Neutronium.官方称 Ionic 4 为"Ionic for Everyone".开发者现在 ...

  9. angular乱码_号外!Angular 中文文档已同步翻译至 7.0

    从 Angular 7 发布(2018-10-18)至今已经过去四天了.四天的时间够干嘛的?只够我把它的文档(几乎)同步翻译完而已! 现在,它已经发布在了 https://angular.cn/doc ...

  10. Angular入门到精通系列教程(6)- Angular的升级

    文章目录 1. 摘要 2. https://update.angular.io/ 3. 总结 环境: Angular CLI: 11.0.6 Angular: 11.0.7 Node: 12.18.3 ...

最新文章

  1. WinCE6.0 修改开机Logo方法集锦(二)
  2. BQ24296充电管理芯片使用过程中的注意事项
  3. 用户案例 - 3Cs
  4. 全链路压测平台(Quake)在美团中的实践
  5. 收藏 | Transformer 论文详细解读
  6. Objective-C SQLiteHelper
  7. HEU 1031 Basic Remains
  8. 学习算法的网址【原创】
  9. 误删除 Oracle 数据库数据的恢复方法
  10. 使用Object.prototype.toString判断数据类型
  11. 北大软微计算机技术硕士复试,【高分学长带你飞】北大软微408学长超详经验贴...
  12. 在和弦上进行旋律创作(不断更新)
  13. rman归档日志备份到磁盘并恢复的测试
  14. 谷歌人工智能影响挑战的受益者 | 硅谷洞察
  15. iphone避坑指南
  16. matlab开方分布上分位点,概率密度分布函数和上分位点的数值计算
  17. css 使盒子之间有间距 两边对齐
  18. 公厕智能离子净化器有多种除臭净味技术
  19. 串口屏应用案例_大彩串口屏在高拍仪上的应用方案
  20. 好用的数据恢复软件EasyRecovery2023最新版

热门文章

  1. 那个清华哈佛双料女学霸, 辞职了
  2. 听说阎王爷要做个生死簿后台管理系统,我们派去了一个程序员……
  3. [UE4]暂停游戏、退出游戏、游戏输入模式
  4. Winform开发之SqlCommand常用属性和方法
  5. Linux mii-tool命令
  6. unity5, Configurable Joint: Anchor, Connected Anchor, Auto Configure Connected Anchor
  7. centos6.x系统内核升级的方法
  8. linux下面桌面的安装
  9. LocalBroadcastManager分析
  10. 人们为何喜欢在社交网络发布个人状态?