当前位置: 首页 > Web前端 > vue.js

不用再看图片优化攻略了:v-img引入

时间:2023-03-31 22:09:21 vue.js

来介绍你有没有看过所谓万字长文,各种图片优化技巧。看完喜欢,收藏,再往下看?很久以前听说过webp,但是考虑到兼容性,老老实实回到jpg和png了吗?你在项目中使用UI截取的图片吗?使用img元素显示它。项目上线后,发现图片太大,刚打开首屏就发送了几十个图片请求。这时你才想到压缩图片,使用懒加载?现在,使用vue技术栈的同学有福利了。不用再重复上面的操作,使用v-img组件就可以解决上面的烦恼。你不需要掌握图片优化技巧,不需要下载各种图片压缩工具,也不需要考虑webp兼容性,也不需要再去寻找懒加载的类库。所有这些组件都是为您完成的。你继续用jpg、png,让组件帮你变回webp,让图片加载更快,节省流量,就这么简单!那么,这个组件是如何工作的呢?很简单,把代码中的img换成v-img就可以了!效果展示太惊艳了,一起来看看效果吧。懒加载启用webp/使用阿里云OSS服务启用webp/项目私有化部署案例分析下面看一个项目引入v-img前后的对比。优化前,不使用v-img时,项目首页加载情况如下:如图,首屏图片总体积947.1KB,请求数61。优化后,使用v-img打开webp:如上图,首屏图片大小缩小为668.9KB。开启v-img的懒加载功能,首页加载情况如下:最终首屏图片总体积为609.4KB,图片请求数减少为13张。也就是说,使用v-img后,首屏总大小减少了350KB左右,图片请求数量减少了50左右,而且你不需要知道各种图片优化技巧和繁琐的兼容性检测,组件帮你啦!揭秘那么,v-img内部到底做了什么?基本思路是:传原图url自动给原url加上一系列参数?format=webp返回optimizedimagebydefault该配置适用于镜像放在阿里云OSS上的场景。如果项目中使用了其他影像服务或者私有化部署,可以修改provider参数。核心逻辑如下:如果想深入了解内部机制,可以参考文档,或者直接阅读源码,文末附上相关链接。结束语我们最初制作这个组件的想法很简单,就是想在项目中使用webp。带着这个想法,我们开始设计和实现它。期间,我所属的所有项目都使用了v-img,提高了Lighthouse的评分,提升了用户体验。这次开发v-img的经历和以往不同。综上,总结了以下几点:我们解决的是当前场景遇到的问题,不是过去的场景,也不是别人遇到的问题。我们实践了多少A场景(包括使用云服务,私有化部署),而不是仅仅满足于单一场景。这个结果是多人合作产生的,而不是以往的一个人设计,一两个人实施的协作模式。可以说v-img是我们集体智慧的结晶吧?一般来说,这是一个值得骄傲的成就。如果你也喜欢,欢迎使用,给它一个??。相关链接源码地址设计文档