Vue之性能调优
打包优化
1. 屏蔽 sourceMap
sourceMap作用:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。
在config目录的index.js文件的build对象中将 productionSourceMap修改为false
2. 对项目代码中的 js/css/svg(*.ico)文件进行gzip压缩(需要浏览器及后端支持)
productionGzip作用:对 js、css文件进行压缩,对于svg、ico、bmp文件进行压缩,对png、jpg、jpeg无压缩效果
需要安装依赖:需要对compress-webpack-plugin支持,所以需要通过 npm install --save-dev compression-webpack-plugin
配置:1. 在config目录的index.js文件的build对象中将 productionGzip 设置为 true
2. 在 productionGzipExtensions: ['js', 'css'] 中进行设置需要进行压缩的文件格式
3. 对路由组件进行懒加载
优点:按需加载,减少首屏加载速度
缺点:会产生多个js文件,会导致进行多次http请求,项目较大时会产生多余的额外消耗
源码优化:
1. v-if与v-show的使用
2. item设置唯一值
3. 减少watch数据
4. 细分组件
5. 懒加载(vue-lazyload)
用户体验优化
1. better-click防止iphone点击延迟
2. 骨架屏加载:防止页面闪屏和跳动
3. 添加菊花loading
Vue之性能调优的更多相关文章
- 小程序组件化框架 WePY 在性能调优上做出的探究
作者:龚澄 导语 性能调优是一个亘古不变的话题,无论是在传统H5上还是小程序中.因为实现机制不同,可能导致传统H5中的某些优化方式在小程序上并不适用.因此必须另开辟蹊径找出适合小程序的调估方式. 本文 ...
- 业务系统请求zabbix图表性能调优
性能调优实践 性能调优实践 背景 问题分析 后端优化排查 前端优化排查 后端长响应排查 zabbix server 优化 总结 背景 用 vue.js 的框架 ant-design vue pro 实 ...
- web前端性能调优
最近2个月一直在做手机端和电视端开发,开发的过程遇到过各种坑.弄到快元旦了,终于把上线了.2个月干下来满满的的辛苦,没有那么忙了自己准备把前端的性能调优总结以下,以方便以后自己再次使用到的时候得于得心 ...
- [网站性能2]Asp.net平台下网站性能调优的实战方案
文章来源:http://www.cnblogs.com/dingjie08/archive/2009/11/10/1599929.html 前言 最近帮朋友运营的平台进行了性能调优,效果还不错, ...
- Asp.net平台下网站性能调优的实战方案(转)
转载地址:http://www.cnblogs.com/chenkai/archive/2009/11/07/1597795.html 前言 最近帮朋友运营的平台进行了性能调优,效果还不错,所以写出来 ...
- 第0/24周 SQL Server 性能调优培训引言
大家好,这是我在博客园写的第一篇博文,之所以要开这个博客,是我对MS SQL技术学习的一个兴趣记录. 作为计算机专业毕业的人,自己对技术的掌握总是觉得很肤浅,博而不专,到现在我才发现自己的兴趣所在,于 ...
- sqlserver性能调优第一步
相信不少的朋友,无论是做开发.架构的,还是DBA等,都经常听说“调优”这个词.说起“调优”,可能会让很多技术人员心头激情澎湃,也可能会让很多人感觉苦恼,不知道如何入手.当然,也有很多人对此不屑一顾,因 ...
- JavaScript:内存泄露、性能调优
1.在进行JS内存泄露检查之前,先要了解JS的内存管理: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Manageme ...
- hadoop 性能调优与运维
hadoop 性能调优与运维 . 硬件选择 . 操作系统调优与jvm调优 . hadoop运维 硬件选择 1) hadoop运行环境 2) 原则一: 主节点可靠性要好于从节点 原则二:多路多核,高频 ...
随机推荐
- 【LeetCode】127. Word Ladder 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/word-lad ...
- Robin Hood
Robin Hood 题目链接 题意 给你n个人和他们的钱数,然后给你k天,每天可以从最高钱数的人那边取一块钱给最少钱数的人,问最后钱数最多的人和钱数最少的人相差多少: 思路 二分最钱数,能下降到的位 ...
- 【LeetCode】138. Copy List with Random Pointer 复制带随机指针的链表 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人公众号:负雪明烛 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https:/ ...
- Bean拷贝工具
Apache BeanUtils Spring BeanUtils cglib BeanCopier Hutool BeanUtil Mapstruct Dozer 1.Apache BeanUti ...
- Service有多个实现类,它怎么知道该注入哪个ServiceImpl类
方法一:Controller中注入service的时候使用@Autowired自动注入,@Qualifier("beanId")来指定注入哪一个. 方法二:Controller中注 ...
- Mind the Box: $\ell_1$-APGD for Sparse Adversarial Attacks on Image Classifiers
目录 概 主要内容 Croce F. and Hein M. Mind the box: \(\ell_1\)-APGD for sparse adversarial attacks on image ...
- iGPT and ViT
目录 概 主要内容 iGPT ViT 代码 Chen M., Radford A., Child R., Wu J., Jun H., Dhariwal P., Luan D., Sutskever ...
- 求最大公因数和最小公倍数(C++实现)
求两个正整数之最大公因子的算法(辗转相除法) 最大公约数是指能同时整除它们的最大正整数 基本原理:两个数的最大公约数等于它们中较小的数和两数之差的最大公约数. 就如有 a = 122, b = 54 ...
- TypeScript 中文教程之缩小----部分翻译自TS官方
Narrowing概念:字面意思是缩小,可以理解为细化或者您觉得更好的代名词. TS官方在这里做了很详细的说明,文字较多,简单以图片概括: typeof type guards 类型防护过程,可以通 ...
- vue项目配置及代理解决跨域
axios数据请求 1.下载模块:npm install axios 2.axios特点: 1.支持在浏览器当中发起XMLHttpRequest请求 2.支持Promise 3.自动转换json数据 ...