性能优化整理（Vue）

代码优化

1. 代码模块化：常用的封装成组件、css->less、sass 有变量
2. for循环设置key值：快速寻找到该条数据，对比old和new时，更快定位到diff
3. Vue路由设置成懒加载：当首屏渲染的时候，能够加快渲染速度 component:resolve=>require([‘组件路径’],resolve)
4. 深入理解Vue的生命周期：全局变量 组件销毁后 重置为null，避免造成内存泄漏
5. 可以使用keep-alive：缓存组件
6. v-if和v-show选择调用
   区别：v-if 懒加载，false时不占用布局空间，支持元素、v-else，更高的切换开销
   v-show true or false 都渲染，占据布局空间，不支持元素、v-else，更高的初始化渲染开销
   需频繁调用、不需要权限的显示隐藏 使用v-show
7. 减少watch的数据
8. computed和watch选择调用
   区别：computed：计算属性 依赖其他属性值 有缓存
   watch： 某个数据的监听回调
   运用：computed：需进行数值计算且依赖其他属性值（因其缓存特性，避免重复计算）
   watch：数据变化时执行异步操作或开销较大的操作时
9. 长列表性能优化Object.freeze方法来冻结对象
   Object.freeze()
   冻结对象
   不能添加新的属性
   不能修改其已有属性的值
   不能删除已有属性
   不能修改该对象已有属性的可枚举性、可配置性、可写性。
   普通的 JavaScript 对象
   Vue 遍历对象所有属性并使用 Object.defineProperty
   将对象所有的属性全部转为 getter/setter
   Vue 追踪依赖，在属性被访问和修改时通知变化。
10. 避免v-if与v-for同时使用
    优先级 v-for>v-if
11. 如果需要使用v-for给每项元素绑定事件时使用事件代理
12. 使用路由懒加载、异步组件
13. 长列表滚动到可视区域动态加载
14. 图片懒加载

打包优化

1. 修改vue.config.js中的配置项
   productionSourceMap:false（不生成map文件、不可查看源码）
   productionGzip:true （开启gzip压缩）
2. 使用cdn的方式外部加载一些资源
   externals 设置不必要打包的外部引用模块
   在index.html 通过cdn引入需要的插件
3. 减少图片使用：css3、雪碧图
4. 按需引入 eg：使用element-ui库，引入所需组件，babel-plugin-component
5. splitChunks抽离公共文件
6. 多线程打包happypack

用户体验优化

1. better-click防止iphone点击延迟
2. 骨架屏加载

seo优化

1. 预渲染
2. 服务端渲染ssr