vue项目优化

最新推荐文章于 2024-08-14 15:08:22 发布
最新推荐文章于 2024-08-14 15:08:22 发布
阅读量5.5k 收藏 71
点赞数 23
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43638968/article/details/109100958
版权

一、代码优化

1. 使用keep-alive缓存不活动的组件

keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

  • 在动态组件中的应用
<keep-alive :include="whiteList" :exclude="blackList" :max="amount">
     <component :is="currentComponent"></component>
</keep-alive>
  • 在vue-router中的应用
<keep-alive :include="whiteList" :exclude="blackList">
    <router-view></router-view>
</keep-alive>

include定义缓存白名单，keep-alive会缓存命中的组件；exclude定义缓存黑名单，被命中的组件将不会被缓存；
很多时候也可以配合路由的meta属性使用

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //不需要被缓存的组件
 } 
]
<keep-alive>
  <router-view v-if="this.$route.meat.keepAlive"></router-view>
  <!--这里是会被缓存的组件-->
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--这里是不会被缓存的组件-->

2. 使用路由懒加载

Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。

路由懒加载：

export default new Router({
  mode: 'history',
  routes: [
			{
		     path: '/',
		     component: ()=>import('@/components/DefaultIndex') }
		     ]
		     })

详见另一篇博客：前端优化中的路由懒加载

3. 图片懒加载

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：

npm引入：npm i vue-lazyload -S
CDN引入：[https://unpkg.com/vue-lazyload/vue-lazyload.js](https://unpkg.com/vue-lazyload/vue-lazyload.js)

使用：
main.js:

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
 
Vue.use(VueLazyload)
 
// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})
 
new Vue({
  el: 'body',
  components: {
    App
  }
})

template:

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

4. 使用节流防抖函数(性能优化)

那么在 vue 中怎么使用呢：
在公共方法中（如 untils.js 中），加入函数防抖和节流方法

// 防抖
export function _debounce(fn, delay) {
    var delay = delay || 200;
    var timer;
    return function () {
        var th = this;
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            timer = null;
            fn.apply(th, args);
        }, delay);
    };
}
// 节流
export function _throttle(fn, interval) {
    var last;
    var timer;
    var interval = interval || 200;
    return function () {
        var th = this;
        var args = arguments;
        var now = +new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn.apply(th, args);
            }, interval);
        } else {
            last = now;
            fn.apply(th, args);
        }
    }
}

在需要使用的组件引用

import { _debounce } from "@/utils/public";

在 methods 中使用

  methods: {
    // 改变场数
    changefield: _debounce(function(_type, index, item) {
        // do something ...
    }, 200)
  }

应用：

函数防抖(debounce)

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

<body>
      <input type="text" id='unDebounce'>
</body>
</html>

<script>

    //模拟一段ajax请求
    function ajax(content){ 
        console.log('ajax request ' + content) 
        };
    letinputa = document.getElementById('unDebounce');
        function fn(e){ ajax(e.target.value) }
    //防抖函数，处理多次被触发的事件，只执行最后一次
    inputa.addEventListener('input', fn)
</script>

看一下运行结果：
在这里插入图片描述
可以看到，我们只要输入一个字符，就会触发这次ajax请求。不仅从资源上来说是很浪费的行为，而且实际应用中，用户也是输出完整的字符后，才会请求。下面我们优化一下：

<body>
      <input type="text" id='unDebounce'>
</body>
</html>

<script>
    //防抖函数
    function _debounce(fn, delay) {
    var delay = delay || 200;
    var timer;
    return function () {
        var th = this;
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            timer = null;
            fn.apply(th, args);
        }, delay);
    };
}

    //模拟一段ajax请求
    function ajax(content){ 
        console.log('ajax request ' + content) 
        };
    let inputa = document.getElementById('unDebounce');
    function fn(e){ ajax(e.target.value) }
    //防抖函数，处理多次被触发的事件，只执行最后一次
    inputa.addEventListener('input', _debounce(fn,1000))
</script>

在这里插入图片描述
我们加入了防抖以后，当你在频繁的输入时，并不会发送请求，只有当你在指定间隔内没有输入时，才会执行函数。如果停止输入但是在指定间隔内又输入，会重新触发计时。

个人理解 函数防抖就是法师发技能的时候要读条，技能读条没完再按技能就会重新读条。

函数节流(throttle)

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。


<body>
      <input type="text" id='unDebounce'>
</body>
</html>

<script>
//节流函数
function _throttle(fn, interval) {
    var last;
    var timer;
    var interval = interval || 200;
    return function () {
        var th = this;
        var args = arguments;
        var now = +new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn.apply(th, args);
            }, interval);
        } else {
            last = now;
            fn.apply(th, args);
        }
    }
}
    //模拟一段ajax请求
    function ajax(content){ 
        console.log('ajax request ' + content) 
        };
    let inputa = document.getElementById('unDebounce');
    function fn(e){ ajax(e.target.value) }
    //防抖节流，无论你输入多块，每隔1秒钟执行一次
    inputa.addEventListener('input', _throttle(fn,1000))
</script>

在这里插入图片描述

不管我们设定的执行时间间隔多小，总是1s内只执行一次。

个人理解 函数节流就是fps游戏的射速，就算一直按着鼠标射击，也只会在规定射速内射出子弹。

总结

函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。
函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。

结合应用场景

debounce

  • search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
  • window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

throttle

  • 鼠标不断点击触发，mousedown(单位时间内只触发一次)
  • 拖拽事件，每拖动1px都会触发onmousemove（可以用throttle优化，每秒触发一次）
  • 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

5. v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

  • v-for 遍历必须为 item 添加 key

在列表数据进行遍历渲染时，需要为每一项 item 设置唯一 key 值，方便 Vue.js 内部机制精准找到该条列表数据。当 state
更新时，新的状态值和旧的状态值对比，较快地定位到 diff 。

  • v-for 遍历避免同时使用 v-if

v-for 比 v-if 优先级高，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，必要情况下应该替换成
computed 属性。

推荐：

<template>
  <div class="home">
    <ul>
      <li
        v-for="user in activeUsers"
        :key="user.id">
        {{ user.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return {
      users:[{id:1,name:'zhangsan',isActive:true},{id:2,name:'lisi',isActive:true},{id:3,name:'wangwu',isActive:false},{id:4,name:'maliu',isActive:true},]
    }
  },
  computed: {
    activeUsers: function () {
    //  [js 的filter（）方法](https://www.cnblogs.com/qiu2841/p/8961017.html)
      return this.users.filter(function (user) {
          return user.isActive
      })
    }
  }
}
</script>

不推荐：

<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id">
    {{ user.name }}
  </li>
</ul>

6. v-if 和 v-show 区分使用场景

v-if 是 真正 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show就简单得多， 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。

所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景； v-show则适用于需要非常频繁切换条件的场景。

7. computed 和 watch 区分使用场景

computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

  • 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；

  • 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

8. 长列表性能优化

Vue 会通过 Object.defineProperty 对数据进行劫持，来实现视图响应数据的变化，然而有些时候我们的组件就是纯粹的数据展示，不会有任何改变，我们就不需要 Vue 来劫持我们的数据，在大量数据展示的情况下，这能够很明显的减少组件初始化的时间，那如何禁止 Vue 劫持我们的数据呢？可以通过 Object.freeze 方法来冻结一个对象，一旦被冻结的对象就再也不能被修改了。

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};

9. 事件的销毁

Vue 组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。 如果在 js 内使用 addEventListene 等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露，如：

created() {
  addEventListener('click', this.click, false)
},
beforeDestroy() {
  removeEventListener('click', this.click, false)
}

10. 第三方插件的按需引入

我们在项目中经常会需要引入第三方插件，如果我们直接引入整个插件，会导致项目的体积太大，我们可以借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体积的目的。以下为项目中引入 element-ui 组件库为例：

（1）首先，安装 babel-plugin-component ：

 npm install babel-plugin-component -D
``
（2）然后，将 .babelrc 修改为：
```js
 {
   "presets": [["es2015", { "modules": false }]],
   "plugins": [
     [
       "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
     ]
   ]
 }

（3）在 main.js 中引入部分组件：

 import Vue from 'vue';
 import { Button, Select } from 'element-ui';

 Vue.use(Button)
 Vue.use(Select)

二、webpack打包优化

详见我上一篇博客vue-cli4打包优化（webapck优化）

最后别忘记 「点赞」

star@星空
关注
浅谈 Vue 项目优化的方法
08-28
浅谈 Vue 项目优化的方法 本文旨在介绍 Vue 项目优化的方法，涵盖基础优化、模板优化、样式优化和脚本优化等方面的知识点。 基础优化是任何 Web 项目都需要做的，是问题的根源。我们需要关心 HTML、CSS、JS 三个...
【优化】Vue项目如何优化？这篇文章就够了！超全优化方面
南宫的CG世界
06-23 4229
1.CDN优化 2.现代化打包优化 3.异步组件优化 4.vue首屏白屏优化
vue项目的一些优化
smz的博客
09-20 2707
以上记录了vue在各个方面的优化，对于webpackp的优化在学完webpackp后完善。
如何优化 Vue.js 页面性能：多接口调用导致页面卡顿的解决方案
最新发布
qq_67572731的博客
08-14 696
【代码】如何优化 Vue.js 页面性能：多接口调用导致页面卡顿的解决方案。
Vue项目性能优化方案
m0_46318298的博客
04-26 3002
vue项目性能优化方案
关于 Vue 项目性能优化技巧分享
qq_39071178的博客
06-05 2207
vue项目从代码到静态文件再到webpack配置优化
Vue项目中的性能优化
qq_37831545的博客
03-07 2394
Vue项目中的性能优化：尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher - v-if 和v-for区分使用场景，v-if和v-for不要连用； - v-for遍历必须为item添加key，key保证唯一性，且避免同时使用vif - computed和method区分使用场景 - 路由懒加载、图片懒加载、长列表动态加载 - 第三方模块按需导入 - 对于短时间的大量操作（缩放、滚动）使用防抖、节流函数 - 事件的销毁
如何应对vue项目优化的需求，掌握这“神器”就够了
01-08
该文章是博主针对之前做的一个vue移动端项目进行优化之后的总结，项目用的是vue-cli3 + spa。本文章针对的是简单的首屏加载优化，该文章还有后续版本。 分析 vue-cli 3.x自带了分析工具，直接运行vue-cli-service ...
Vue项目的优化资源整理
12-20
Vue 项目优化主要关注代码效率、用户体验和资源加载速度。以下是一些关键的优化策略： 1. **使用 `keep-alive` 缓存组件** `keep-alive` 是 Vue 中用于缓存组件实例的一个抽象组件，它可以避免组件在切换时进行...
浅谈vue项目打包优化策略
10-17
本文将深入探讨Vue项目打包优化策略，重点讨论如何通过组件按需加载和路由懒加载来缩减打包后的资源大小，提高首屏加载速度。 首先，项目在部署生产环境时，往往发现资源包过于庞大，比如打包后的vendor.js文件达到...
Vue项目卡顿慢加载？这些优化技巧告诉你！
热门推荐
web全栈开发的博客
06-30 1万+
前端开发是一个快速发展的领域，每天都会涌现出新的技术和工具。在实现功能的同时，开发人员面临着许多挑战如代码可维护性，加载时间,访问速度,构建速度等问题。这些挑战可能直接影响网站的性能和用户体验，需要采取一些优化措施来改善问题。在本文中，我们将探讨一些前端项目优化的具体措施，旨在帮助开发人员提高项目效率，升级用户体验。综合各方面来说 就是。
Nuxt.js优化坑、进行CDN加速(axios/jQuery/swiper/vue-lazyload图片懒加载等进行cdn加载)、elementui进行按需加载
熟悉JS拼写的FE
06-14 4595
(亲测有效)服务端渲染nuxt对axios/jQuery/swiper/vue-lazyload启用cdn加速，elementUI进行按需导入 前言：在nuxt中做一些性能上的优化其实存在许多坑，尽管nuxt已经帮你做了许多事情， 下面是我慢慢捣鼓出来的，有问题的话望大佬指出 一 、打包开启打包分析 第一步，下载依赖webpack-bundle-analyzer npm i webpack-bundle-analyzer -D 第二步，在package.json中scripts中加一项配置 "
不要再写满屏import导入啦！
baiyiqiusuo的博客
06-14 76
导致import占满全屏的原因有很多。但不用模块重导、require.context、import动态导入、webpack.ProvidePlugin等手段，一定会让我们写出满屏的import😂🤣😅😇。只有想不到的，没有做不到的。只要你想、相信就一定能如愿以偿。
Vue项目优化方案
m0_51431448的博客
08-14 4926
当我们项目开发到后期的时候，可能就要谈及到去优化下项目了，比如经常碰见的：打包体积过大，首屏加载太慢，还有性能的问题，这其实跟我们平时开发的时候息息相关，代码写的怎么样还得是看个人了...
Vue性能优化
weixin_45752307的博客
06-02 183
Vue性能优化 v-for中使用一个唯一标识绑定key（尽量不要与索引绑定） 代码如下所示，虽然在页面上渲染的内容一样，但是底层区别不同 <div id="app"> <div v-for="(item,index) in imgList" :key="item">{{item}}</div> //√ <div v-for="(item,index) in imgList" :key="i">{{item}}</div&g
vue单页面加载了所有js文件解决办法
积极的小可爱~的博客
11-19 2633
看其他人解决办法都是 我原先就是这么写的了，看控制台还是加载了所有Js。后来再某个文章里看到解决办法在 vue.config.js module.exports = { chainWebpack: config => { config.plugins.delete("prefetch")//只加载当前页面需要的js }, } 文章链接 ...
vue项目性能优化详解汇总
前端打工人的博客
04-30 5180
提起性能优化 很多人眼前浮现的面试经验是不是历历在目呢？反正，性能优化在我看来他永远是前端领域的热度之王。 先说一下性能优化的方案： 一、基础优化（代码以及编码规范） 1、v-if 和 v-show 区分使用场景 v-if=false时不渲染DOM，v-show会预渲染DOM，v-if 在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建 2、computed 和 watch 区分使用场景 computed：是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下
vue项目优化常用方式
dongwei666的博客
08-01 1759
vue优化方法
vue项目优化面试题
04-12
在Vue项目优化面试题中，有几个常见的优化方案可以考虑： 1. 减少大数据获取和渲染：设计上避免一次性获取和渲染大量数据，可以采用分页加载或者懒加载的方式，只在需要时获取和渲染部分数据。 2. 虚拟表格优化...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

star@星空

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值