vue项目性能优化你了解多少？

最近，博主我也是很苦啊！现在新的开发任务下来了，忙着做产品需求分析，报告，跑业务，晚上加班陪领导酒局，每天累得跟狗一样。但是我就喜欢这一口，哈哈！！现在我的职业生涯开始真正的步入正轨，今后会不定时的更新文章，谢谢大家对我的支持！（膜拜）

从前的我是一个最很菜的混子，连最基本的函数方法该怎么用都不明白，工作之后更惨，最怕每个星期的例会，每次会上最有可能挨批的就是我。

好在我脸皮够厚，刚出社会遭到过很多的独打，在长途汽车站明明已经看到汽车站售票大厅了，硬是听信人家说不在这里买票，让黄牛多收几十块钱的服务费；去市区逛商场不会用手机地图迷路了（咿呀！），慢慢就适应了。这就是我，看见自己就来气，但是我爱他呀！

首先，我们要找到VUE性能的现存问题，大部分都是代码层面的，然后具体的提出代码层优化意见就可以了。 目前所知的VUE代码层优化大致为一下11点：

---

1.路由懒加载

路由懒加载能够提高页面的加载速度，不过使用也得看场合。有时候需要懒加载，提升首页加载速度，一般是页面层级较为复杂的时候。
看一个浏览器中不加代码分够割的实例：

1.这里蓝色部分是webpack自动分割出来的，当修改业务js时候manifest和vendor是不会改变的，浏览器直接在缓存中提取。

2.会变的是app.js。如果不采用路由分割会是什么效果呢。所有的代码都打包到app.js中，如果项目巨大，那么首页加载会是灾难。

所以webpack就提供了这样一种代码分割的工具，看看代码：

2.keep-alive缓存页面

当我们不想每次跳转路由都会重新加载页面时（重新加载页面很耗时），就可以考虑使用keep-alive缓存页面了。

<template>

  <div id="app">

    <keep-alive>

      <router-view/>

    </keep-alive>

  </div>

</template>

3.使用v-show复用DOM

<el-button v-show="true">显示</el-button>

这里大家就要注意了：
v-show和v-if同样都能够达到显示和隐藏效果，这里就要区别了。前者有display的作用，只是隐藏，还存在dom里面；而v-if就是从节点里面删除，dom里面也删除了。这样就有个问题了，如果是一个显示隐藏的问题，最好用v-show，v-if每次都需要重新创建dom节点渲染，消耗浏览器性能。

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

当v-if与v-for一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中

所以，不推荐v-if和v-for同时使用

5.长列表性能优化

如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容

6.事件的销毁

Vue 组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的事件

created() {
    
    
  this.timer = setInterval(this.refresh, 2000)
},
beforeDestroy() {
    
    
  clearInterval(this.timer)
}

7.图片懒加载

对于图片过多的页面，为了加速页面加载速度。

所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载

<img v-lazy="/static/img/1.png">

8.第三方插件按需引入

如果在项目中使用了element-ui第三方插件库，我们不需要全部引入里面的组建，需要用到哪个组建引用就行，避免项目打包体积太大

import Vue from 'vue';
 
import {
    
     Button, Select } from 'element-ui';<br><br> Vue.use(Button)
 
 Vue.use(Select)

9.无状态的组件标记为函数式组件

10.子组件分割

11.变量本地化

参考至：https://www.cnblogs.com/bob-zb/p/12481014.html