vue 性能优化

1.代码层面

1. 下里将所有的数据都放在data中，data中的教据都会增加getter和setter,会收集对应的watcher
2. vue在v-for时给每项元素绑定事件需要用事件代理 ：key  diff算法靠key去判断是否走diff 算法  v-for >v-if
3. spa页面采用keep-alive缓存组件  actived  deactivatedd
4. 拆分组件(提高复用性.增加代码的可维护性，减少不必要的渲染）
5. vif当值为false时内部指令不会执行,具有阻断功能，很多惆况下使用v-if代v.show  生成虚拟dom的时候 根据指令确定是否有虚拟dom
6. key保证唯一性（默认vue会采用就地复用策略}
7.object.freeze 冻结教据（就不会getter和setter）
7. 合理使用路由懒加载、异步组件
8. 尽量采用runtime运行时版本
9. 教据持久化的问题（防抖、节流）
10. 下载第三方包 按需引入  下载loader 区分loader为开发loader还是生产loader

2.Vue加载性能优化

1.使用第三方框架，按照按需加载导入
2.滚动可视化区域懒加载
3.图片懒加载

3.用户体验

1.app-skeleton 骨架屏 / app-shell app 壳
2.单页面切换动画

4.SEO优化

1.预渲染插件 prerender-spa-plugin
2.服务端渲染 ssr

5.打包优化```

```bash
1.使用 cdn 的方式加载第三方模块
2.多线程打包 happypack
3.splitChunks 抽离公共文件
4.sour ceMap 生成
5.gzip
``
6.缓存/压缩`

```bash
1.客户端缓存 or 服务端缓存
2.服务端 gzip 压缩

1.优化代码  模块化
2.分装可复用组件、方法、减少代码量
3.for ：key
4.路由懒加载
5.销毁生命周期 全局标量 = null 
6.keep-alive
7.cdn 加载外部资源
8.减少图片使用 精灵图
9.按需引入
10.区分开发依赖和生成依赖
11.gizp
12.v-show v-if   v-for>v-if
13.computed   watch