2021-07-14 暑期实训开发日志7——学习vue性能优化方案

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

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

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

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

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

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

四、善用vue的一些属性

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

学习转载自link.