1. 现状

目前music life图片多采用懒加载，目的是加快首页打开速度。但是出现一个问题：在网速不稳定情况下出现图片没加载出来情况，影响了用户体验。

2. 解决方案

2.1 控制图片资源大小

排查后台系统图片上传途径，由于当时开发周期短，要求就是能用，疏忽了加上图片上传限制条件。现已对图片上传大小做了限制要求在1M以下（商品详情图片不做限制）。从源头处控制。

优化后

压缩有的图片加载速度普遍控在500ms左右

2.2 采用.webp格式

2.2.1 简介

WebP，是一种同时提供了有损压缩与无损压缩的图片文件格式，派生自视频编码格式 VP8。WebP 最初在2010年发布，目标是减少文件大小，但达到和 JEPG 格式相同的图片质量，希望能够减少图片档在网络上的发送时间。2011年11月8日，Google 开始让 WebP 支持无损压缩和透明色的功能。根据 Google 较早的测试，WebP 的无损压缩比网络上找到的PNG档少了45％的文件大小，即使这些 PNG 档在使用 PNGCRUSH 和 PNGOUT 处理过，WebP 还是可以减少28％的文件大小。就目前而言，Webp 可以让图片大小平均减少70%。WebP 是未来图片格式的发展趋势。

下图是淘宝h5页面对于webp格式的使用情况：可以看出webp格式图片体积非常小，但是一点也没用因为模糊而影响用户的体验。

2.2.2 效果对比

2.2.3 目前现状

老的上传接口不支持webp格式图片. 可能需要重写以支持webp格式，可以一劳永逸。

2.3 前端对图片进行压缩再上传（基于vue+elementUI）

实现方案在上传前通过钩子函数拿到上传的file,做压缩处理后再上传。下面是代码展示：

2.3.1 步骤

安装压缩插件文档地址github.com/WangYuLue/i…

参考博客blog.csdn.net/Superman_pe…

npm i --save image-conversion

局部引入

import * as imageConversion from "image-conversion";

编写handleBeforeUpload钩子函数

// 上传前校检格式，大小和压缩图片体积
handleBeforeUpload(file) {
			// 一定要返回promise 质量比在0-1之间，默认0.9 
      return new Promise((resolve) => {
        imageConversion.compress(file, 0.8).then((res) => {
          console.log("压缩后", res);
          resolve(res);
        });
      });
},

2.3.2效果对比：

可以观察两者几乎没有差别，但是图片体积已经从1.5M压缩到330k。大大减少了响应时间。

优化图片加载时间