Vue性能优化的方法有哪些

一. 编码优化:

1.不要将所有的数据都放在data中,data中的数据都会增加getter和setter,会收集对应的 watcher,这样就会降低性能。

2. vue 在 v-for 时给每项元素绑定事件需要用事件代理,节约性能。

3.尽可能拆分组件,来提高复用性、增加代码的可维护性,减少不必要的渲染。因为组件粒度最细,改组件的数组,它只会渲染当前的组件。

4. v-if 当值为false时内部指令不会执行,具有阻断功能,很多情况下使用v-if替代v-show,合理使用if和show。

5. key 保证唯一性,不要使用索引 ( vue 中diff算法会采用就地复用策略)。

6.合理使用路由懒加载、异步组件。

7.数据持久化的问题,使用防抖、节流进行优化,尽可能的少执行和不执行。

二、加载性能:


1.使用第三方插件实现按需加载

2.滚动到可视区域动态加载 

3.图片懒加载 

三、SEO 优化:

1.预渲染插件 prerender-spa-plugin,可以把我们代码提前运行起来,最后将代码保存下来,缺陷就是不实时。

2.服务端渲染 ssr

四、打包优化:

1.使用 cdn 的方式加载第三方模块

2.多线程打包 happypack

3.抽离公共文件 splitChunks

4.sourceMap 生成

 

五、缓存和压缩:

1.客户端缓存 服务端缓存

2.服务端 gzip 压缩

原创作者:吴小糖

创作时间:2024.2.24 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/700548.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023最新简绘AI开源版支持MJ绘画,AI问答

应用介绍 本文来自:2023最新简绘AI开源版支持MJ绘画,AI问答 - 源码1688 简介: 简绘AI开源版,从闲鱼上买的,搭建教程如下 测试环境:NginxPHP7.4MySQL5.6 图片:

力扣300最长递增子序列

给你一个整数数组 nums ,找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列,删除(或不删除)数组中的元素而不改变其余元素的顺序。例如,[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。 示例 1&#…

STM32F4XX - CAN设置

can协议部分 - 逻辑信号和电平信号 先贴上CAN信号在物理信号线上的查分信号表示形式 显性电平: 电压差范围为1.5-2.5v。 对应的逻辑电平是0 隐性电平: 其他 对应的逻辑电平是1 为什么显性电平对应的逻辑电平值为0,而隐性电平对应的逻辑电平…

视频互动游戏如何暴打海王和舔狗

前言 前2篇文章回答了游戏的可取之处以及不可复制的地方还有对于这一类的情景互动游戏在2024年的发展预言。第三篇主要是回答在一篇中一个留言的读者问的问题“如何暴打海王和舔狗”,求同存异,希望能够跟更多的读者交流与互相学习。 海王和舔狗的特征 …

2023全新UI千月影视APP源码 | 前后端完美匹配、后端基于ThinkPHP框架

应用介绍 本文来自:2023全新UI千月影视APP源码 | 前后端完美匹配、后端基于ThinkPHP框架 - 源码1688 简介: 2023全新UI千月影视APP源码 | 前后端完美匹配、后端基于thinkphp框架 图片:

免费多域名证书,最多支持保护250个域名

随着企业规模扩大和多元化发展,拥有多个域名的需求变得普遍,此时,多域名SSL证书应运而生,并且这一类型的证书已经发展到能够安全地支持多达250个不同域名的加密需求。 多域名SSL证书,也称为SAN(Subject Alt…

【前端素材】推荐优质后台管理系统Tiny平台模板(附源码)

一、需求分析 后台管理系统是一个重要的工具,用于管理和维护网站、应用程序或系统的正常运行。通过灵活的权限管理和各种功能模块的结合,后台管理系统能够有效地帮助管理员管理和控制系统,提高工作效率和系统安全性。 后台管理系统是一种用…

OSCP靶场--Slort

OSCP靶场–Slort 考点(1.php 远程文件包含 2.定时任务提权) 1.nmap扫描 ┌──(root㉿kali)-[~/Desktop] └─# nmap 192.168.178.53 -sV -sC -p- --min-rate 5000 Starting Nmap 7.92 ( https://nmap.org ) at 2024-02-24 04:37 EST Nmap scan report for 192.168.178.53 …

2024年华为OD机试真题-伐木工-Python-OD统一考试(C卷)

题目描述: 一根X米长的树木,伐木工切割成不同长度的木材后进行交易,交易价格为每根木头长度的乘积。规定切割后的每根木头长度都为正整数;也可以不切割,直接拿整根树木进行交易。请问伐木工如何尽量少的切割,才能使收益最大化? 输入描述: 木材的长度(X<=50) 输出描…

二手旧物回收系统开发:推动可持续发展的关键

随着人们环保意识的增强&#xff0c;二手旧物回收系统的发展逐渐成为社会关注的焦点。开发二手旧物回收系统&#xff0c;不仅能有效减少废弃物的排放&#xff0c;降低对环境的污染&#xff0c;还能实现资源的循环利用&#xff0c;推动可持续发展。本文将深入探讨二手旧物回收系…

C#常识篇(一)

面向对象的三大特性 继承&#xff1a;子类通过继承父类来获取基础特性&#xff0c;并且能够基于父类进行扩展以及提升代码的复用性。继承具有传递性&#xff0c;例如A继承自B&#xff0c;C继承自A&#xff0c;那么C就间接继承自B。在C#中&#xff0c;每个类仅允许继承一个父类。…

java8新特性-Lambda

目录 一、Lambda 1、什么是Lambda表达式 2.Lambda表达式的基本语法&#xff1a; 3.参数列表 4.Lambda表达式使用前后对比 举例一&#xff1a; 举例二&#xff1a; 二、函数式接口 1.函数式接口的使用说明 2.4个基本的函数式接口 3.如何定义函数接口 1.保证接口中只…

Java:获取网络资源文件的文件大小

工具类代码 package com.example.util;import org.apache.commons.io.FileUtils;import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.net.MalformedURLException; import java.net.URL; import java.net.URLConnection;/…

Javaweb之SpringBootWeb案例之AOP案例的详细解析

4. AOP案例 SpringAOP的相关知识我们就已经全部学习完毕了。最后我们要通过一个案例来对AOP进行一个综合的应用。 4.1 需求 需求&#xff1a;将案例中增、删、改相关接口的操作日志记录到数据库表中 就是当访问部门管理和员工管理当中的增、删、改相关功能接口时&#xff0c…

MyBatis之Mapper.xml文件中parameterType,resultType,resultMap的用法

MyBatis之自定义数据类型转换器 前言1.parameterType2.resultType3.resultMap实例代码总结 前言 今天我们来学习Mapper.xml&#xff08;编写SQL的&#xff09;文件中&#xff0c;增删改查标签中&#xff0c;使用parameterType属性指定传递参数类型&#xff0c;resultType属性指…

【Java程序设计】【C00291】基于Springboot的网上图书商城(有论文)

基于Springboot的网上图书商城&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的网上图书商城 本系统分为系统功能模块、管理员功能模块以及卖家功能模块。 系统功能模块&#xff1a;在系统首页可以查看首页、图书…

GEE必须会教程—Map工具的使用

一个星期的时间&#xff0c;跟着小编的角度&#xff0c;我们已经学习了数值、字符串、字典、列表、日期、矩阵等基本的编程数据类型&#xff0c;这些是学习任何一门编程语言都需要掌握的知识&#xff0c;还有不懂得赶紧关注小编&#xff0c;进行主页查看过往文章&#xff01;! …

剑指offer面试题18 树的子结构

考察点 树的遍历&#xff0c;递归思想知识点 题目 分析 本题目要求判断树B是否是另外一颗树A的子结构&#xff0c;按照正常的递归思维就可以解决这道题目。首先要求这俩颗树的根结点必须一样&#xff0c;所以如果树A的根结点和树B的根结点不一样了则需要递归树A去找到和树B根…

离散数学 第八单元 布尔代数

目录 1. 布尔函数 2. duality 二元性 3. 表示布尔函数的布尔表达式 sum-of-products expansions 4. Functional Completeness 5. Logic Gates 逻辑门​​​​​​​ 4. 最小化 K-map卡诺图 Quine-McCluskey法 1. 布尔函数 嗯也就是我要知道布尔代数是啥形式&#xff…

【Spring】 AOP面向切面编程

文章目录 AOP是什么&#xff1f;一、AOP术语名词介绍二、Spring AOP框架介绍和关系梳理三、Spring AOP基于注解方式实现和细节3.1 Spring AOP底层技术组成3.2 初步实现3.3 获取通知细节信息3.4 切点表达式语法3.5 重用&#xff08;提取&#xff09;切点表达式3.6 环绕通知3.7 切…