vue组件懒加载 ajax,前端性能优化成神之路--vue组件懒加载(Vue Lazy Component )

---恢复内容开始---

使用组件懒加载的原因

我们先来看看这样的一个页面,页面由大量模块组成,所有模块是同时进行加载,模块中图片内容较多,每个模块的依赖资源较多(包括js文件、接口文件、css文件等)

所以我们在加载这样的页面会非常的慢

c4071b4818d5f0ad5a79530cabfa1844.png

解决思路——加载优先级

在完成了组件化的拆分,确保模块之间不会互相影响和产生耦合之后,我们可以方面地调整加载策略。加载的策略是根据可见性来处理优先级问题。

优先加载首屏可见模块

其余不可见模块懒加载,待可见或即将可见时加载

Vue组件懒加载方案——Vue Lazy Component

该插件支持 组件可见或即将可见时懒加载,支持 组件延时加载,支持 加载组件前展示组件骨架,提高用户体验,支持 懒加载组件分包异步加载

安装插件:方式1 利用插件方式全局注册,方式2 局部注册,方式3 独立版本引入,自动全局注册

npm i @xunlei/vue-lazy-component

dafd55d9819786925719f723a61170b9.png

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-lazyload是一个基于vue的图片插件,它可以让我们在vue项目中实现图片的功能。它通过自定义指令v-lazy和IntersectionObserver API来实现的功能。我们只需要安装并引入插件,并在需要的元素上使用v-lazy指令即可。在全局main.js文件中,我们需要引入并注册vue-lazyload组件。可以通过以下代码实现: import Vue from 'vue'; import VueLazyLoad from 'vue-lazyload'; Vue.use(VueLazyLoad, { error: require('./assets/img/error.jpg'), // 失败时显示的图片 loading: require('./assets/img/loading.gif'), // 中时显示的图片 preLoad: 1.3, // 预高度的比例 attempt: 3 // 尝试次数 }); 然后,在需要的图片元素上使用v-lazy指令即可,例如: <img v-lazy="imageSrc" alt="lazy-loaded-image"> 其中,imageSrc是图片的地址。这样,当图片元素进入视口范围内时,就会开始该图片。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [【vue】如何使用vue-lazyload实现图片](https://blog.csdn.net/2301_76635548/article/details/131007819)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值