vue页面性能优化方案

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

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

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

2、减小等待经过xhr获取数据的时间

一、在redis中添加缓存
二、在并发容许且数据量较多的状况下，分页能够交给后端作，利用数据库进行排序后取出须要的分页内容，这样虽然增长了xhr请求，可是单次请求耗费时间会大大下降；后端分页每次取数据不必定是仅取当前分页的数据，能够一次性取当前页以及当前页的先后各两页的数据，这样用户进行先后页的切换时，不须要从新继续发起xhr请求。
三、一些内容固定的数据（但又须要进行管理），能够将这些数据的获取合并为一个请求，每次刷新只须要取一次
四、提早发起xhr请求：能够在dom渲染完成以前就发起xhr请求，而不是等待dom渲染完成以后才进行。created时，或者beforeRouteEnter时就调用。

3、经过交互，在视觉效果上提高

一、能够经过一些加载loading动画，以及资源加载完成前，能够经过占位符占位的方式，避免渲染时出现空白页，视觉上提高加载速度
二、优先加载当前用户可视区域的内容，其余内容待用户切换tab或者滚动鼠标或者可视区域加载完成后再继续加载
三、图片预渲染，能够在当前页上根据页面上的跳转连接（或者tab页可能的切换），预渲染一些图片

4、善用vue的一些属性

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

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

6、代码优化

一、一些前端能作的事情，能够在前端本地作，好比当分页是前端分页的时候，伴随的一些排序、筛选等，也能够由前端实现，节省xhr请求，减小时间损耗
二、通用方法封装为模块，减小代码冗余
三、写一些性能高的代码