总结一下遇到的vue性能优化的知识:
1. 减小打包体积
- 模块化和组件化
- 封装高度复用性的模块(axios等)
- 封装高度复用性的组件(组件的可配置性要强)
-
组件的懒在加载
首次加载的资源更少,访问更快
-
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更新数据这些,就没必要缓存