vue项目优化

418 阅读1分钟

vue项目常用优化手段

1、打包优化

  • 提取组件的 CSS 到单独到文件
  • 屏蔽 sourceMap
  • 开启 gzip 压缩
  • 公共库使用cdn外链
    • 打包vender时不打包vuevuexvue-routeraxios等,换用国内的 bootcdn、unpkg 直接引入到根目录的 index.html 中。并把上述文件配置在externals中。

2、源码优化

  • template
    • 不要在模板里面写过多表达式
    • v-for 增加 key
    • v-showv-if 的使用
    • 善用 v-once
    • 图片资源按需加载(vue-lazyload
    • 善于运用事件代理
  • script
    • created钩子里面请求数据
    • Promise.all() 并发请求
    • 使用 Object.freeze() 来取消 Observer观察
    • 减少watch的数据,慎用 deep watch
    • 善用 web StoragesessionStorage、localStorage
  • 组件缓存(keep-alive
  • 第三方库按需加载(不用加载整个库
  • 路由组件懒加载 import()

3、用户体验优化

  • fastclick 防止300ms延迟
  • 菊花loading
  • 骨架屏加载
  • 首屏直出
  • 服务端渲染(SSR

4、通用前端优化

这里参考我的另外一篇文章:前端性能优化(最全总结)