来介绍你有没有看过所谓万字长文,各种图片优化技巧。看完喜欢,收藏,再往下看?很久以前听说过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内部到底做了什么?基本思路是:
