Angular 8 - 更小的包
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 等级来决定是否从区分加载中获益。
1
2
3
4
5
6
7
8
9
|
{ "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。
现在,这样使用:
1
2
3
4
5
|
{ 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 的子集。
新的不建议使用手册
我们提供更高等级的跨主要版本的维护语义版本稳定性。对于我们的 Public API,我们提供 N + 2 支持。这意味着如果一个特性从 8.1 开始不建议使用,我们将在下两个主要版本继续支持 ( 9 和 10 ) 。例如,我们在版本 8 中不建议的 platform-webworker。
我们在使得在 Angular 中更容易发现不建议使用的内容并删除它。对于所有不建议使用的功能列表,请查阅新的 不建议使用手册
Ivy & Bazel
我们知道有大量的对于即将到来的可选预览的期待。我们将在下周的博客中进行单独更新,
Angular 8 - 更小的包的更多相关文章
- 使用 Angular CLI 和 Webpack 分析包尺寸
使用 Angular CLI 和 Webpack 分析包尺寸 对于 Web app 来说,高性能总是最高优先级,对于 Angular 也不例外.但是随着应用复杂度的不断增长,我们如何才能知道哪些内容打 ...
- 新型序列化类库MessagePack,比JSON更快、更小的格式
MessagePack is an efficient binary serialization format. It lets you exchange data among multiple la ...
- TCP传输小数据包效率问题(译自MSDN)
TCP传输小数据包效率问题(译自MSDN) http://www.ftpff.com/blog/?q=node/16 摘要:当使用TCP传输小型数据包时,程序的设计是相当重要的.如果在设计方案中不对T ...
- Docker多步构建更小的Java镜像
译者按: 最新版Docker将支持多步构建(Multi-stage build),这样使用单个Dockerfile就可以定义多个中间镜像用于构建,测试以及发布等多个步骤,并且有效减小最终镜像的大小. ...
- 不妨试试更快更小更灵活Java开发框架Solon
@ 目录 概述 定义 性能 架构 实战 Solon Web示例 Solon Mybatis-Plus示例 Solon WebSocket示例 Solon Remoting RPC示例 Solon Cl ...
- VMware精简系统Win系列|体积更小更稳定
此Win系列基于VMware10 给个我自用的超精简VM10.0.3 XP重新制作体积大了一点但更稳定,压缩包166M 制作了Win 2003,压缩包171.4M Win7重新制作体积更小更稳定,压缩 ...
- Linux没有最小只有更小----迷你Linux版本大集合(转)
[自从去年到现在已经收集了上百种版本的Linux和Unix,至于Unix就不想说了,没有Linux的功底是很难驾驭Unix的,我在这里只把小于360M的Linux以及一些非Linux但是很像Linux ...
- Gradle更小、更快构建APP的奇淫技巧
本文已获得原作者授权同意,翻译以及转载原文链接:Build your Android app Faster and Smaller than ever作者:Jirawatee译文链接:Gradle更小 ...
- Qunar机票技术部就有一个全年很关键的一个指标:搜索缓存命中率,当时已经做到了>99.7%。再往后,每提高0.1%,优化难度成指数级增长了。哪怕是千分之一,也直接影响用户体验,影响每天上万张机票的销售额。 在高并发场景下,提供了保证线程安全的对象、方法。比如经典的ConcurrentHashMap,它比起HashMap,有更小粒度的锁,并发读写性能更好。线程安全的StringBuilder取代S
Qunar机票技术部就有一个全年很关键的一个指标:搜索缓存命中率,当时已经做到了>99.7%.再往后,每提高0.1%,优化难度成指数级增长了.哪怕是千分之一,也直接影响用户体验,影响每天上万张机 ...
随机推荐
- 实现strStr()函数
方法一:暴力解法 int strStr(string haystack, string needle) { if (needle.empty()) ; int M = haystack.size(); ...
- 2019 杭电多校第八场 HDU - 6665 Calabash and Landlord 两矩形分平面
题意 给出两个矩形,问这两个矩形把平面分成了几部分. 分析 不需要什么高级技能,只需 “简单” 的分类讨论. (实在太难写了,对拍找出错误都不想改 推荐博客,其中有个很好的思路,即只讨论答案为2,3, ...
- E:nth-of-type(n)
E:nth-of-type(n) 语法: E:nth-of-type(n) { sRules } 说明: 匹配同类型中的第n个同级兄弟元素E.深圳dd马达 要使该属性生效,E元素必须是某个元素的子元素 ...
- spark读文件写入mysql(scala版本)
package com.zjlantone.hive import java.util.Properties import com.zjlantone.hive.SparkOperaterHive.s ...
- css选择器:first-child与:first-of-type的区别
:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素.比如有段代码: <div> <p>第一个子元素</p> < ...
- 爬虫(十三):scrapy中pipeline的用法
当Item 在Spider中被收集之后,就会被传递到Item Pipeline中进行处理 每个item pipeline组件是实现了简单的方法的python类,负责接收到item并通过它执行一些行为, ...
- spring boot + mybaits 处理枚举类 enum
枚举: //实现层调用 orderMapper.getOrder(OrderStatus.DISCOUNT); sql打印: 实际sql: select * from order where orde ...
- 8、RDD持久化
一.RDD持久化 1.不使用RDD持久化的问题 2.RDD持久化原理 Spark非常重要的一个功能特性就是可以将RDD持久化在内存中.当对RDD执行持久化操作时,每个节点都会将自己操作的RDD的par ...
- python打包成exe,太大了该怎么解决?
这是一个很长的故事,嫌长的直接看最后的结论 事情经过 上周接了个需求,写了个小工具给客户,他要求打包成exe文件,这当然不是什么难事.因为除了写Python的,绝大多数人电脑里都没有Python编译器 ...
- laravel-china 镜像停止服务
php 的很多开发都会用到composer.然后国内的镜像又慢,很多人会选择用laravel-china的镜像. 之前一直用的很好.今天突然发现不能composer update.出现报错.WTF!! ...