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

来介绍你有没有看过所谓万字长文，各种图片优化技巧。看完喜欢，收藏，再往下看？很久以前听说过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是我们集体智慧的结晶吧？一般来说，这是一个值得骄傲的成就。如果你也喜欢，欢迎使用，给它一个??。相关链接源码地址设计文档