0
点赞
收藏
分享

微信扫一扫

简述Vue性能优化的一些方法

绪风 03-17 21:45 阅读 3

说到性能优化是个老生常谈的问题了,那么我总结一些我自己的经验的方法。

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.第三方插件按需引入

有些第三方组件库可以按需引入避免体积太大,特别是项目不大的情况下,更没有必要完整引入组件库。

其他应该还有,大家可以一起补充一下,谢谢!


举报

相关推荐

0 条评论