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

本文探讨了如何通过Vue组件懒加载(Vue Lazy Component)提升前端性能,降低首屏加载时间。同时介绍了资源合并与压缩、图片懒加载等优化策略,旨在实现前端性能的全面提升。
摘要由CSDN通过智能技术生成

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

使用组件懒加载的原因

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

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

c4071b4818d5f0ad5a79530cabfa1844.png

解决思路——加载优先级

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

优先加载首屏可见模块

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

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

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

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

npm i @xunlei/vue-lazy-component

dafd55d9819786925719f723a61170b9.png

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值