vue项目优化

vue项目常用优化手段

1、打包优化

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

2、源码优化

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

3、用户体验优化

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

4、通用前端优化

这里参考我的另外一篇文章：前端性能优化（最全总结）