vue项目性能优化

一、代码层面

1.v-if和v-show使用场景区分

2.computed和watch使用场景区分

3.v-for必须加key，不可和v-if同级使用

4.纯静态数据列表展示，可通过Object.freeze冻结对象

5.组件销毁时，手动移除事件监听器，避免内存泄漏

6.图片懒加载，将页面未出现在可视区域的图片先不做加载，待滚动到可视区域再去加载（IntersectionObserver或监听scroll事件）

7.路由懒加载

8.第三方插件按需引入

9.长列表可使用虚拟滚动，只渲染部分区域内容，减少重新渲染组件和创建dom节点的时间

10.首屏ssr

二、webpack层面

1.可使用url-loader设置limit大小来对图片处理。小于limit的图片转为base64格式。对于较大图片，可使用image-webpack-loader压缩

2.提取公共代码，避免相同资源被重复加载，拆包（splitChunks），配合http2.0多路复用

3.使用externals抽离vue、vuex、vue-router、ui组件库等，使用cdn方式引入

三、web技术优化

1.开启gzip压缩，上传至cos桶，使用cdn缓存并开启cdn加速

2.开启dns预解析

<meta http-equiv="x-dns-prefetch-control" content="on">

<link rel="dns-prefetch" href="//###" />

3.小图标移出项目，引入iconfont

4.BFF层聚合请求，防止出现阻塞性连续请求

5.启用http2，多路复用任意并发

6.接口增加协商缓存，优化二次打开速度

四、用户感知层面

1.白屏时增加loading

2.首屏增加骨架屏

3.图片采用小图替换的渐进式加载策略