Vue 性能调优

优先使用v-if
v-if与v-show都是作用与元素的显示隐藏，一个是操作DOM，一个是操作CSS的display属性，一般使用v-if的情况比较多

v-for与v-if不要一起使用
vue2.0的一个bug。优先级： v-for > v-if
当两个指令同时出现在一个DOM时，v-for先渲染出来，v-if后判断是否显示。列表重写变化，这是不合理的
解决： 使用计算属性，把v-if中不需要渲染的值过滤掉
如
computed: {
filterList: function () {
return this.showData .filter(function(data) {return data.isShow})
}
}

DOM

v-for生成列表避免使用index作为标识

当出现列表中插入一条数据时，列表后面的key发生了变化，更新的时候会对后面key发生变化的元素进行重新生成渲染，导致了不必要的开销
所以尽量使用index作为标识，而是使用数据唯一的值，比如id

释放组件资源
组件销毁后，需要把开辟的资源给销毁掉，比如： setInterval, addEventLinstener等(优化： 可以将分配资源和释放资源的逻辑写在一起： hook)

长列表
涉及到长列表的场景。新手是通过一个v-for将列表遍历出来，随着数据加载，DOM越来越多，会导致性能开销问题。所以建议是类似于图片懒加载，将页面外的DOM移除，只有出现在视图的才是重要的。第三方解决方案vue-virtual-scroller

图片优化

小图标使用svg或者字体图标
使用base64和webp格式
cdn加速加载大图
懒加载

路由按需加载
方式：

1 require
component: resolve => (require(['@/components/HelloWorld'], resolve))

2 import
component: () => import('@/components/HelloWorld')

实现在第一次加载时压力小一些，不会出现超长白屏情况

UI框架使用方式
Element， and Design按需加载

首屏优化
加载动画，在 index.html 里面直接写，vue 挂载后会自动去除里面的内容的 样式 结构

最小化JS文件

webpack处理打包JS文件

config.optimization.minimize(true)

删除沉淀代码
Tree-Shaking

使用CDN加速
可以将Vue Axios Echarts分离出来
CDN LinkDI地址：BootCDN（www.bootcdn.cn）

// 在html引入script标签后。在vue的配置中，进行声明

configureWebpack: {
externals: {
‘echarts’: ‘echarts’ // 配置使用CDN
}
}

GZIP压缩
后端