webp的js插件_网页webp解决方案

背景说明

某个国际化项目。前端用的技术栈是vue全家桶，使用nuxt-ssr渲染。

项目遇到的问题

项目中用到了大量的产品图片和比较大的banner图片。因为服务器在国外，也没有对静态服务器有相应的配置cdn服务，所以用户在第一次访问的时候，由于没有缓存所以导致图片渲染非常的慢，导致我们网站的体验非常大。

解决问题的想法优化千万条，图片第一条。加载特别慢，用户两行泪。

好吧，我们这次要解决主要就是图片加载慢的问题。有几个客观因素我们暂时无法避免服务器在国外

没有专门的cdn供本项目的使用

既然没有办法从硬件方便入手，那么只能从另外两方面入手图片加载前能否优雅的告诉用户我们正在加载，您不要走，稍等一下

能否加载一些图片质量又高，体积又小的图片来加快图片下载速度

优雅的加载

我们怎么才能在图片下载前，告诉用户我们正在加载呢？可以放一个骨架屏

可以放一个默认图片

可以放个进度条

这些看起来都不错，但是都有一个问题，用户无法感知这个图片的大致内容，或者说这些东西都和原图跳跃性太大。

所以我们选择的是第四种方案：放一个体积在1kb左右特别模糊的小图，然后放大展示。

webp

加载的问题解决了，那么有质量又高，体积又小的图片格式是什么，没错是webp。

关于这个格式的来龙去脉网上有很多介绍，我就不搬砖了(详情见下面两个链接)

根据这些资料，我们可以总结一下webp的特点：同样质量的图片webp格式比jpg格式小50%以上

同样质量的图片webp格式比png格式小45%以上

webkit内核浏览器早就可以支持webp格式图片了

还有个别浏览器(IE:"看我干吗？")对webp支持依然不够友好

所以优化图片的格式就选择了webp。

技术调研

有了上面的思考，我们的想法应该是，不能怂，就是干。

我们来仔细的分析一下上面的这个需求，大致我拆分大两点webp格式图片和小图怎么来的

我怎么把这个功能做的通用一点

图片是怎么来的我不想知道我是怎么没的， 我就想知道我是怎么来的

缺图片？找设计。好吧，如果我们去找设计要这种图片，设计拒绝了我们并且给了一段鄙视语。情理之中，毕竟重复工作谁都不愿意做。

那我们就让机器去做。

具体的想法是，我们能不能在项目打包的时候，顺便把需要的图片都生成出来。那肯定可以，这样的需求看起来有一个东西特别适合来做，webpack的plugin钩子(为什么不用loader？)。简单讲就是，当我们使用本项目的图片的时候比如require('image/bg.jpg')的时候。webpack会触发compiler.hooks的部分声明周期