打包优化

  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之性能调优的更多相关文章

  1. 小程序组件化框架 WePY 在性能调优上做出的探究

    作者:龚澄 导语 性能调优是一个亘古不变的话题,无论是在传统H5上还是小程序中.因为实现机制不同,可能导致传统H5中的某些优化方式在小程序上并不适用.因此必须另开辟蹊径找出适合小程序的调估方式. 本文 ...

  2. 业务系统请求zabbix图表性能调优

    性能调优实践 性能调优实践 背景 问题分析 后端优化排查 前端优化排查 后端长响应排查 zabbix server 优化 总结 背景 用 vue.js 的框架 ant-design vue pro 实 ...

  3. web前端性能调优

    最近2个月一直在做手机端和电视端开发,开发的过程遇到过各种坑.弄到快元旦了,终于把上线了.2个月干下来满满的的辛苦,没有那么忙了自己准备把前端的性能调优总结以下,以方便以后自己再次使用到的时候得于得心 ...

  4. [网站性能2]Asp.net平台下网站性能调优的实战方案

    文章来源:http://www.cnblogs.com/dingjie08/archive/2009/11/10/1599929.html 前言    最近帮朋友运营的平台进行了性能调优,效果还不错, ...

  5. Asp.net平台下网站性能调优的实战方案(转)

    转载地址:http://www.cnblogs.com/chenkai/archive/2009/11/07/1597795.html 前言 最近帮朋友运营的平台进行了性能调优,效果还不错,所以写出来 ...

  6. 第0/24周 SQL Server 性能调优培训引言

    大家好,这是我在博客园写的第一篇博文,之所以要开这个博客,是我对MS SQL技术学习的一个兴趣记录. 作为计算机专业毕业的人,自己对技术的掌握总是觉得很肤浅,博而不专,到现在我才发现自己的兴趣所在,于 ...

  7. sqlserver性能调优第一步

    相信不少的朋友,无论是做开发.架构的,还是DBA等,都经常听说“调优”这个词.说起“调优”,可能会让很多技术人员心头激情澎湃,也可能会让很多人感觉苦恼,不知道如何入手.当然,也有很多人对此不屑一顾,因 ...

  8. JavaScript:内存泄露、性能调优

    1.在进行JS内存泄露检查之前,先要了解JS的内存管理: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Manageme ...

  9. hadoop 性能调优与运维

    hadoop 性能调优与运维 . 硬件选择 . 操作系统调优与jvm调优 . hadoop运维 硬件选择 1) hadoop运行环境 2)  原则一: 主节点可靠性要好于从节点 原则二:多路多核,高频 ...

随机推荐

  1. 【LeetCode】127. Word Ladder 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/word-lad ...

  2. Robin Hood

    Robin Hood 题目链接 题意 给你n个人和他们的钱数,然后给你k天,每天可以从最高钱数的人那边取一块钱给最少钱数的人,问最后钱数最多的人和钱数最少的人相差多少: 思路 二分最钱数,能下降到的位 ...

  3. 【LeetCode】138. Copy List with Random Pointer 复制带随机指针的链表 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人公众号:负雪明烛 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 日期 题目地址:https:/ ...

  4. Bean拷贝工具

    Apache BeanUtils Spring BeanUtils cglib BeanCopier Hutool BeanUtil Mapstruct Dozer 1.Apache  BeanUti ...

  5. Service有多个实现类,它怎么知道该注入哪个ServiceImpl类

    方法一:Controller中注入service的时候使用@Autowired自动注入,@Qualifier("beanId")来指定注入哪一个. 方法二:Controller中注 ...

  6. 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 ...

  7. iGPT and ViT

    目录 概 主要内容 iGPT ViT 代码 Chen M., Radford A., Child R., Wu J., Jun H., Dhariwal P., Luan D., Sutskever ...

  8. 求最大公因数和最小公倍数(C++实现)

    求两个正整数之最大公因子的算法(辗转相除法) 最大公约数是指能同时整除它们的最大正整数 基本原理:两个数的最大公约数等于它们中较小的数和两数之差的最大公约数. 就如有 a = 122, b =  54 ...

  9. TypeScript 中文教程之缩小----部分翻译自TS官方

    Narrowing概念:字面意思是缩小,可以理解为细化或者您觉得更好的代名词. TS官方在这里做了很详细的说明,文字较多,简单以图片概括: typeof  type guards 类型防护过程,可以通 ...

  10. vue项目配置及代理解决跨域

    axios数据请求 1.下载模块:npm install axios 2.axios特点: 1.支持在浏览器当中发起XMLHttpRequest请求 2.支持Promise 3.自动转换json数据 ...