说到性能优化是个老生常谈的问题了,那么我总结一些我自己的经验的方法。
1.列表的优化。
一般列表是比较消耗性能的,尤其是带图片的列表,那么就先说下列表上的图片如何优化;
1.图片优化正常来说就是懒加载图片或者预加载图片,可以使用第三方的一些插件,比如自定义 v-lazy
指令 (参考项目:vue-lazyload
)。
2.列表for循环的时候最好指定唯一key,这有助于Vue高效地识别哪些项已更新、添加或删除。
3.使用<virtual-scroller>
或类似组件,这样只渲染当前视图内的列表项,而非全部列表项。
4.使用分页加载
2.路由懒加载
有效拆分 App
尺寸,访问时才异步加载。
3.keep-alive
缓存页面
避免重复创建组件实例,且能保存缓存组件状态
4.尽量使用使用 v-show
复用 DOM
:
避免重复创建组件
5.v-for里面尽量不使用v-if
6.组件懒加载
可以使用vue-lazy-component来包裹组件,这样可以有效的分担首页所承担的加载压力,减少首页加载用时。
7.第三方插件按需引入
有些第三方组件库可以按需引入避免体积太大,特别是项目不大的情况下,更没有必要完整引入组件库。
其他应该还有,大家可以一起补充一下,谢谢!