Vue性能优化

92 阅读1分钟

总结一下遇到的vue性能优化的知识:

1. 减小打包体积

  • 模块化和组件化
  1. 封装高度复用性的模块(axios等)
  2. 封装高度复用性的组件(组件的可配置性要强)
  • 组件的懒在加载

    首次加载的资源更少,访问更快

  • Production SourceMap

    项目生产环境下,不生成sourceMap,打包体积更小 在打包文件dist/build的config里配置

  • 图片、依赖和插件通过CDN引入

    将图片放在自己的CDN服务器上

  • 图片懒加载

  • UI框架如ElmentUI和Vant采用按需引入

2.keep-alive组件缓存

即缓存组件啊,本质上讲就是动态组件,每次切换过去一般都会重新生成。但是对于组件状态比较固定的组件,我们可以将它缓存起来,再次切换的时候,切换到上一次切出的状态

<keep-alive include="List">   <!-- List是组件名 -->
    <router-view></router>
</keep-alive>

如果一进到页面就要请求ajax更新数据这些,就没必要缓存