首屏优化

56 阅读1分钟
  1. 路由加载是一种按需加载的方式,即需要时再加载。优化方案是将直接导入js变成按需要导入js。app.js中的页面拆分成单独的js文件。
  2. 按需引入第三方组件库。
  3. 压缩图片:(1)使用雪碧图。(2)转换成base64,缺点是无法缓存,转化后导致CSS文件体积增大,渲染的时候可能会出现白屏问题,而且只能转化小图片不能转化大图片。(3)使用SVG矢量图。
  4. 适当使用v-if和v-show:因为v-show是控制display属性进行隐藏和显示,初始开销比较大;而v-if是通过创建和销毁DOM节点实现的隐藏显示,初始开销较小,切换开销较大。
  5. 销毁定时器,适当使用闭包。
  6. 使用gzip压缩。
  7. 动态路由菜单,有些项目动态路由菜单可能是每次刷新过后再调用一次菜单接口,这样就会导致还要等待请求后端时间接口等一系列问题。个人做法是登录的时候请求路由菜单并做本地持久化处理,在响应拦截器中定义一个token失效状态码,当token当新镇失效时直接重定向到登录页面。