Vue应用随机背景图预加载触发资源未使用报错如何解决？

解决方案 #

• 方案1：仅预加载实际使用的图片
  不需要在index.html中提前预加载全部5张图片，先在Vue逻辑中完成随机选图逻辑，再动态创建对应图片的预加载标签，从根源避免多余资源预加载。
  示例代码：

  // 背景图资源列表
  const bgImageList = ['a.jpg', 'b.jpg', 'c.jpg', 'd.jpg', 'e.jpg']
  // 随机选取要使用的背景图
  const selectedImg = bgImageList[Math.floor(Math.random() * bgImageList.length)]
  // 动态插入预加载标签
  const preloadLink = document.createElement('link')
  preloadLink.rel = 'preload'
  preloadLink.as = 'image'
  preloadLink.href = selectedImg
  document.head.appendChild(preloadLink)
  // 后续将selectedImg设置为页面背景即可
  

• 方案2：使用prefetch代替preload预加载全量资源
  如果你有后续切换背景图的需求，需要提前加载全部5张图片，可以把index.html中预加载标签的rel属性从preload改为prefetch。preload的语义是当前页面立即需要使用的资源，未使用会触发警告；prefetch的语义是未来可能用到的资源，浏览器会在空闲时段加载，未使用也不会抛出警告。
  示例标签：

  <link rel="prefetch" as="image" href="a.jpg">
  <link rel="prefetch" as="image" href="b.jpg">
  <!-- 其余3张图同理 -->
  

• 额外注意：无论使用哪种预加载方式，都需要正确设置as属性，图片资源固定填as="image"，属性设置错误也会触发该警告。

内容的提问来源于stack exchange，提问作者Jip Helsen