Vue性能优化

前言

性能优化是所有项目开发中都会涉及到的一个比较深的问题，我在这里主要是想总结一下自己在学习过程中总结到的或是在项目实践过程中遇到的一些性能优化相关的点

性能优化

可以将性能优化分为以下几个方面分别讲

代码优化

1. 不要将所有的数据都放在data中，data中的所有数据都会进行defineProperty()添加getter和setter，如果数据与渲染视图无关，可以将其放在created或mounted里进行声明

2. v-for的元素绑定事件时使用事件代理
   当v-for中循环数量过多时，给每个元素添加click事件显然是很耗内存的，由于事件冒泡机制，可以将事件绑定在父元素上，如果目标元素被点击，会触发父元素上绑定的事件如下所示

3. v-for的key使用唯一值
   key的作用是方便Dom diff
   没有key时，diff比对时会进行元素复用，直接修改dom
   
   有key时，如果发现相同的元素是进行位置移动，注意不要用索引作为key，因为索引是按顺序排的，例如删掉了索引为2的，那么原先排在3的就变成了2，所以索引最好用唯一标识来区分
   

4. 路由懒加载，即路由延迟加载，即用即载，优化首屏页面加载时间长的问题
   有以下两种方式：
   

5. 页面缓存，即添加keep-alive属性
   
   将需要缓存的页面包在<keep-alive>里，通过添加keepAlive属性是否为true控制缓存
   

6. 使用v-if代替v-show
   我们都知道v-if是控制Dom节点的存在与否，v-show是通过切换元素的css属性display:none来控制元素的显示
   v-if:如果条件为false在编译期间不会编译模板内的内容，直接创建一个空的节点<!-->，编译阶段是三目运算符
   v-show:在编译阶段会编译成指令，在运行时去处理这个指令
   所以如果一开始这个元素就是隐藏状态或者这个元素只会渲染或隐藏一次，选择v-if。如果是频繁切换的话选择v-show更加节省性能上的开销

7. 组件细分，提高组件复用性
   我们可以将一些业务相关组件细分，或者是重复性较高的组件提取出来

8. 创建项目时尽量采用运行时版本Runtime-only
   在创建项目时会有个选项就是Runtime+compiler或Runtime-only,如下图
   
   它们的运行编译过程是不同的：
   runtime-compiler
   template -> ast() -> render function -> visual dom -> UI
   runtime-only(more ligter)
   render function -> visual dom ->UI
   runtime-only是在项目编译期间就生成了render函数，runtime-only更轻量级，性能更高

9. 使用Object.freeze(data)将数据冻结
   如果数据只是展示性数据，不会更改，就用Object.freeze()冻结的对象将不会创建getter和setter

加载性能优化

1. 模块按需导入，可参考babel-plugin-conponent插件
2. 图片懒加载
   可使用vue-lazyload插件
3. 滚动条滑动到可视区域加载
   可参考vue-virtual-scroll-list或vue-virtual-scroller

打包优化

1. sourcemap
   在webpack配置文件里添加productionSourceMap: false
2. 多线程打包
   使用happypack插件
3. 使用cdn的方式加载第三方模块

用户体验优化

1. 骨架屏
   在视图加载过程中展示loading
   提升用户感知体验
   保证切换的一致性
   提供可见性观察的目标对象
2. app shell，pwa

seo优化

1. 使用预渲染插件：例如prerender-spa-plugin

2. 服务端渲染SSR

很多内容都不完整，在后期实践中如果有遇到，会补充^_