vue页面性能优化方案

2022-12-21,,,,

个人在项目中用到的页面性能优化的方式总结。

一、均衡页面加载文件的大小和数量

1、项目中小图片图片转base64,通过工具如webpack进行图片压缩,文件进行压缩混淆等
2、vue-router 懒加载,异步路由
3、第三方依赖按需加载,比如使用element-ui框架,但是里面的组件只用到了其中一部分,可以单独建一个引入element组件的文件,在里面引入我们项目中需要的组件,然后vue.use它
4、通过webpack进行处理,有一个externals属性,可以在里面设置不需要打包的文件,比如可以设置将vue、vue-router、element-ui等等设置进去,打包的时候就不会打包他们,然后将vue、vue-router、element-ui等资源在html中引入
5、可以借助开启gzip压缩文件,减小文件大小;
6、生产环境build时不生成map文件

二、减少等待通过xhr获取数据的时间

1、在redis中添加缓存
2、在并发允许且数据量较多的情况下,分页可以交给后端做,利用数据库进行排序后取出需要的分页内容,这样虽然增加了xhr请求,但是单次请求耗费时间会大大降低;后端分页每次取数据不一定是仅取当前分页的数据,可以一次性取当前页以及当前页的前后各两页的数据,这样用户进行前后页的切换时,不需要重新继续发起xhr请求。
3、一些内容固定的数据(但又需要进行管理),可以将这些数据的获取合并为一个请求,每次刷新只需要取一次
4、提前发起xhr请求:可以在dom渲染完成之前就发起xhr请求,而不是等待dom渲染完成之后才进行。created时,或者beforeRouteEnter时就调用。

三、通过交互,在视觉效果上提升

1、可以通过一些加载loading动画,以及资源加载完成前,可以通过占位符占位的方式,避免渲染时出现空白页,视觉上提升加载速度
2、优先加载当前用户可视区域的内容,其他内容待用户切换tab或者滚动鼠标或者可视区域加载完成后再继续加载
3、图片预渲染,可以在当前页上根据页面上的跳转链接(或者tab页可能的切换),预渲染一些图片

四、善用vue的一些属性

1、v-if与v-show根据具体业务场景适当选取
2、善用kee-alive

五、将项目根据业务和模块,改造为多页面,而不是紧靠单页面支撑

六、代码优化

1、一些前端能做的事情,可以在前端本地做,比如当分页是前端分页的时候,伴随的一些排序、筛选等,也可以由前端实现,节省xhr请求,减少时间损耗
2、通用方法封装为模块,减少代码冗余
3、写一些性能高的代码

vue页面性能优化方案的相关教程结束。

《vue页面性能优化方案.doc》

下载本文的Word格式文档,以方便收藏与打印。