[Angular 8] Calculate and Measure Performance budgets with the Angular CLI
Measuring is extremely important, without numbers we don’t know about potential problems and we don’t have a base we can improve upon. Performance Budgets are a way to impose limits on metrics that may affect our app’s performance. In this lesson we’ll learn how to configure the Angular CLI to configure performance budgets, to monitor them and to alert us when we violate them.
In angular.json:
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "bundle",
"name": "main",
"maximumWarning": "350kb",
"maximumError": "500kb"
}
]
}
}
},
[Angular 8] Calculate and Measure Performance budgets with the Angular CLI的更多相关文章
- Angular 1 深度解析:脏数据检查与 angular 性能优化
TL;DR 脏检查是一种模型到视图的数据映射机制,由 $apply 或 $digest 触发. 脏检查的范围是整个页面,不受区域或组件划分影响 使用尽量简单的绑定表达式提升脏检查执行速度 尽量减少页面 ...
- Angular入门到精通系列教程(14)- Angular 编译打包 & Docker发布
目录 1. 概要 2. 编译打包 2.1. 基本打包命令 2.2. 打包部署到二级目录 3. Angular站点的发布 3.1. web服务器发布 3.2. 使用docker发布 4. 总结 环境: ...
- angular源码分析:injector.js文件分析——angular中的依赖注入式如何实现的(续)
昨天晚上写完angular源码分析:angular中jqLite的实现--你可以丢掉jQuery了,给今天定了一个题angular源码分析:injector.js文件,以及angular的加载流程,但 ...
- 【Angular专题】——(2)【译】Angular中的ForwardRef
原文地址:https://blog.thoughtram.io/angular/2015/09/03/forward-references-in-angular-2.html 作者:Christoph ...
- [Angular] Fetch non-JSON data by specifying HttpClient responseType in Angular
By default the new Angular Http client (introduced in v4.3.1) uses JSON as the data format for commu ...
- [Angular] Create a custom validator for reactive forms in Angular
Also check: directive for form validation User input validation is a core part of creating proper HT ...
- angular 子路由跳转出现Navigation triggered outside Angular zone, did you forget to call ‘ngZone.run() 的问题修复
angular 路由功能非常强大,同时angular的路由也非常脆弱,非常容易出现错误. 那么在我们遇到异常时,首先要做的是什么? 第一步:检查代码,对比官方文档,发现代码中不一致的地方进行改正. 第 ...
- [Angular] Show a Loading Indicator for Lazy Routes in Angular
We can easily code split and lazy load a route in Angular. However when the user then clicks that la ...
- Angular05 angular架构、搭建angular开发环境、组件必备三要素、angular启动过程
1 angular架构 1.1 组件:是angular应用的基本构建模块,可以理解为一段带有业务逻辑和数据的HTML 1.2 服务:用来封装可重用的业务逻辑 1.3 指令:允许你想HTML元素添加自定 ...
随机推荐
- ABP中的AutoMapper
在我们的业务中经常需要使用到类型之间的映射,特别是在和前端页面进行交互的时候,我们需要定义各种类型的Dto,并且需要需要这些Dto和数据库中的实体进行映射,对于有些大对象而言,需要赋值太多的属性,这样 ...
- 用Gson实现json与对象、list集合之间的相互转化
先写一个Person实体类,导入Gson包 String jsonData="{\"userid\":\"1881140130\"}";// ...
- Vue、SPA实现登陆
axios/qs/vue-axios安装及使用步骤 首先我们要下载三个依赖包,方便后面的开发使用需要: npm install axios -S axios是vue2提倡使用的轻量版的ajax.它 ...
- # RESTful登录(基于token鉴权)的设计实例
使用场景 现在很多基于restful的api接口都有个登录的设计,也就是在发起正式的请求之前先通过一个登录的请求接口,申请一个叫做token的东西.申请成功后,后面其他的支付请求都要带上这个token ...
- Asp.Net Mvc 整站Https
网站要使用https需要如下几个步骤 1.申请https证书,现在已经有很多免费的https证书申请了 2.服务器中安装证书 3.网站的连接全部改为https连接 Asp.Net Mvc网站中整站改为 ...
- dev 从表处理
从表列名,从表选中行和主表选中一样,var selectrow = detailView.GetRow(detailView.FocusedRowHandle) as obj; private voi ...
- 解决:error LNK1169: 找到一个或多个多重定义的符号
每一个c++项目中可以包含多个cpp文件和.h文件,不过只能有而且必须有一个cpp文件中包含main函数,否则就会报错.所以在一个c++项目中不能单独运行一个cpp文件,只能运行一个项目.如果你想一个 ...
- ffmpeg 播放器原理
1 播放器过程 线程1 : readPackets-------> audio_packets队列 video packets 队列 线程2: decodeAudio && ...
- python day1 python介绍,安装及运算符
目录 python day1 1. 不同编程语言的对比 2. 为什么学python? 3. python的种类 4. python的安装(windows系统) 5. 导入模块或包 6. pyc文件 7 ...
- python数据统计出海品牌
当国内市场处于红海之中时,市场全球化已成为大势所趋.越来越多的国产品牌远走高飞,纷纷将品牌拿出来. 2019年,中国品牌十大品牌中,华为品牌力指数同比增长22%,阿里巴巴品牌力指数增长48%,小米品牌 ...