Vue可做的性能优化

1. 编码阶段

• 尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应订阅者watcher
• v-if和v-for不能连用
• 如果需要使用v-for给每项元素绑定事件时使用事件委托

给每一个item添加一个自定义属性（:data-index=“可用从数据库中取来的item的id”），然后在事件代理中过滤掉事件委托的根节点，判断每一个item的data-index值，做出响应

• SPA页面采用< keep-alive></ keep-alive>缓存组件
• 在更多的情况下，使用v-if代替v-show
• key保证唯一
• 使用路由懒加载、异步组件
• 防抖、节流
• 第三方模块按需导入
• 长列表滚动到可视区域动态加载
• 图片懒加载

2. SEO优化

• 预渲染
• 服务端渲染SSR

3. 打包优化

• 压缩代码
• Tree Shaking/Scope Hoisting（在生产环境下的优化）
  （Tree Shaking是将引用的模块中有使用的方法进行打包，其它未使用过的方法不进行打包；Scope Hoisting是提升作用域，将所有的代码按照引用顺序放在一个函数作用域中，然后适当的重命名一些变量防止变量名冲突）
• 使用CDN加载第三方模块
• 多线程打包happypack
• splitChunks抽离公共文件
• sourceMap优化

4. 用户体验

• 骨架屏
• PWA
• 还可以使用缓存（客户端缓存、服务端缓存）优化、服务端开启gzip压缩等。