react/vue中前端多图片展示页面优化图片加载速度的五种方案

需求背景

在多项目中 例如官网项目中 会出现很多大图片显示的情况  这个时候就会出现图片过大  公司带宽不够之类导致页面加载速度过慢及页面出现后图片仍然占位但并未加载出来  或者因为网络问题导致图片区域黑块等等场景  这个时候我们就要对图片和当前场景进行优化

方案定义

1. 图片更换为avif或者webp格式缩减图片大小，若svg可对svg进一步压缩，vscode中有很多插件支持，但是没有直接使用avif和webp格式效果好
2. 若公司有cdn合作商，可传入cdn，页面直接使用cdn链接
3. nginx配置brotli压缩进一步压缩体积
4. nginx配置开启浏览器缓存，提高后期体验感
5. 对banner或主图进行预加载操作，其他图片正常使用懒加载，使其队列进行优先加载变化及优化后期例如国际化切换效果无感卡顿

预加载实现

//下方主要实现代码 需要放入vue的mounted或者react的useEffect中 banner1和banner2是首页顶部大图中英文两图  
const preloadImages = [banner1, banner2];
    preloadImages.forEach((src) => {
      const img = new Image();
      img.src = src;
});