这是一个创建于 1793 天前的主题，其中的信息可能已经有所发展或是发生改变。
介绍
你是否早就看过所谓的万字长文，上面陈述了各种图片优化技巧，看完之后，你点赞、收藏，然后就没有下文了？
你是否早就听说了 webp，但考虑到了兼容性，你又老老实实用回了 jpg、png ？
你是否在项目中拿到 UI 切的图片就用，使用 img 元素能显示就行，等项目上线了，才发现图片体积过大、刚打开首屏就发送了几十个图片请求，这时才想到对图片进行压缩、使用懒加载？
现在，使用 vue 技术栈的同学有福利啦。大家不需要再重复上述操作了，使用 v-img 组件，就可以解决上述烦恼。
你不需要掌握图片优化技巧、下载各种图片压缩工具，也不需要考虑 webp 的兼容性，也不用再去找懒加载的类库，这一切组件都帮你做了。
你继续使用 jpg、png，让组件帮你返回 webp，让图片加载更快，更节省流量，就是这样简单！
那么，这个组件到底怎么用呢？很简单，就是把代码里的 img 替换成 v-img 就可以了！
效果展示
说得这么神奇，到底效果如何，我们先来一睹为快。
- 懒加载
- 启用 webp/使用阿里云 OSS 服务
- 启用 webp/项目私有化部署
案例分析
下面来看一个项目在引入 v-img 前后的对比。
优化前
在没有使用 v-img 的时候，项目首页的加载情况是这样的：
如图所示， 首屏图片总体积为 947.1 KB，请求数量为 61 个。
优化后
使用v-img 开启 webp 后：
如上图所示， 首屏图片体积减少为 668.9 KB。
开启 v-img 的懒加载功能，首页加载情况如下:
最终，首屏图片总体积为 609.4 KB，图片请求数量减少为 13 个。
也即，使用 v-img 后，首屏总体积大约减少 350 KB，图片请求数量减少约 50 个，而你不需要了解各种图片优化技巧、还有烦琐的兼容性检测，组件都帮你做啦！
揭密
那么， v-img 内部究竟做了什么呢？
其基本设想是：
<v-img src="https://domain.com/path/original.jpg" />
- 传参原始图片 url
- 自动在原 url 添加一系列参数 ?format=webp
- 返回优化后的图片
默认配置适用于图片放在阿里云 OSS 的场景，如果项目中使用的是其他图片服务或私有化部署，可以修改 provider 参数
其核心逻辑如下：
要是想更详细地了解内部机制，可以查阅文档，或者直接阅读源码，文末会附上相关链接。
结语
我们最初做这个组件的想法很简单，就是想在项目中使用 webp。
有了这个想法，我们就开始动手设计并实现。
在此期间，把所属的项目全部用 v-img 实践了一波，提高了 Lighthouse 的分数，提升了用户体验。
此次研发 v-img 的经历不同于以往，总结起来有如下几点：
- 我们解决的，是自己当前所在场景遇到的问题，而非过去的场景，亦非别人遇到的问题
- 我们实践了多个场景（包括使用云服务、私有化部署），而非仅仅满足于单一场景
- 此次成果是由多人合作共同产出的，而非以往的一人设计、一两人实现的协作模式。可以说，v-img 是我们集体智慧的结晶🙏
总的来说，这是一个值得自豪的成果😎。如果你也喜欢，欢迎使用，随手点一颗⭐️。
相关链接
目前尚无回复
Select Language