Vue性能优化

1、Vue-Router路由懒加载

路由懒加载的含义：

把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件

const List = () => import('@/components/list.vue')

const router = new VueRouter({
  routes: [
    { path: '/list', component: List }
  ]
})

2、v-if和v-for

不要将v-if和v-for写在同一标签上

3、首屏加载速度慢

1. 减小入口文件体积
2. 静态资源本地缓存
3. UI框架按需加载
4. 图片资源压缩

4、尽量减少data中的数据

尽量减少data中的数据，data中的数据会增加getter和setter，会收集对应的watcher

5、SPA单页面优化

-   SPA 页面采用keep-alive缓存组件

6、 key保证唯一

- SPA 页面采用keep-alive缓存组件

7、 防抖、节流

8、 长列表滚动到可视区域动态加载

css sprite雪碧图

优点

1. 减少http请求，提高页面加载速度
2. 减少图片的字节，多张图片合成一张图片的字节，小于多张字节的总和
3. 减少命名困扰
4. 更换风格方便

缺点

1. 不能自适应，容易出现背景断裂
2. 背景设置时，需要精确位置
3. 不便于维护