Nuxt3中picture标签触发所有srcset图片预取的问题求助

问题描述 #

首次开发Nuxt3应用并开启SSR，编写的picture标签代码如下：

<picture>
  <source srcset="
    ~/assets/imagesindex/carte_carte_320.webp 320w,
    ~/assets/imagesindex/carte_carte_640.webp 640w,
    ~/assets/imagesindex/carte_carte_800.webp 800w,
    ~/assets/imagesindex/carte_carte_1024.webp 1024w,
    ~/assets/imagesindex/carte_carte.webp 1440w" sizes="(min-width: 992px) 50vw,
    90vw" type="image/webp">
  <source srcset="
    ~/assets/imagesindex/carte_carte_320.png 320w,
    ~/assets/imagesindex/carte_carte_640.png 640w,
    ~/assets/imagesindex/carte_carte_800.png 800w,
    ~/assets/imagesindex/carte_carte_1024.png 1024w,
    ~/assets/imagesindex/carte_carte.png 1440w" sizes="(min-width: 992px) 50vw,
    90vw" type="image/png">
  <img src="~/assets/imagesindex/carte_carte_800.png" alt="access map">
</picture>

构建后，Nuxt3自动为所有srcset中的图片生成prefetch链接：

<head>
  ...
  <link rel="prefetch" href="/_nuxt/carte_carte_320.48ec1b6d.webp">
  <link rel="prefetch" href="/_nuxt/carte_carte_640.00bf8096.webp">
  <link rel="prefetch" href="/_nuxt/carte_carte_800.4e4ac5f6.webp">
  <link rel="prefetch" href="/_nuxt/carte_carte_1024.85af6e70.webp">
  <link rel="prefetch" href="/_nuxt/carte_carte.02ce3f37.webp">
  <link rel="prefetch" href="/_nuxt/carte_carte_320.4cadc525.png">
  <link rel="prefetch" href="/_nuxt/carte_carte_640.0893b26c.png">
  <link rel="prefetch" href="/_nuxt/carte_carte_800.7c9fed76.png">
  <link rel="prefetch" href="/_nuxt/carte_carte_1024.074e5d49.png">
  <link rel="prefetch" href="/_nuxt/carte_carte.9ec49e85.png">
  ...
</head>

这导致预加载数据量高达5MB，Pagespeed评分极差。尝试过client-only渲染、v-html动态渲染均无效，未找到有效Vite配置方案。

解决方案 #

1. 配置Nuxt Image模块禁用prefetch #

Nuxt3的Image模块默认会为图片添加prefetch，可在nuxt.config.ts中全局或针对性禁用：

export default defineNuxtConfig({
  image: {
    prefetch: false, // 全局禁用图片prefetch
    // 也可针对预设配置
    presets: {
      default: {
        prefetch: false
      }
    }
  }
})

2. 改用public目录存放图片，绕过Nuxt自动优化 #

将图片从assets/imagesindex移动到public/imagesindex，使用绝对路径直接引用，避免Nuxt对图片资源进行自动处理：

<picture>
  <source srcset="
    /imagesindex/carte_carte_320.webp 320w,
    /imagesindex/carte_carte_640.webp 640w,
    /imagesindex/carte_carte_800.webp 800w,
    /imagesindex/carte_carte_1024.webp 1024w,
    /imagesindex/carte_carte.webp 1440w" sizes="(min-width: 992px) 50vw,
    90vw" type="image/webp">
  <source srcset="
    /imagesindex/carte_carte_320.png 320w,
    /imagesindex/carte_carte_640.png 640w,
    /imagesindex/carte_carte_800.png 800w,
    /imagesindex/carte_carte_1024.png 1024w,
    /imagesindex/carte_carte.png 1440w" sizes="(min-width: 992px) 50vw,
    90vw" type="image/png">
  <img src="/imagesindex/carte_carte_800.png" alt="access map">
</picture>

3. 修改Vite配置控制预加载行为 #

在nuxt.config.ts中调整Vite的Rollup输出配置，仅允许JS/CSS资源预加载：

export default defineNuxtConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          preload: (chunk) => {
            // 过滤图片资源，只预加载JS/CSS
            return chunk.fileName.match(/\.(js|css)$/)
          }
        }
      }
    }
  }
})

4. 手动移除生成的prefetch链接 #

如果以上方法无效，可在页面组件中通过DOM操作移除指定prefetch链接：

<script setup>
onMounted(() => {
  const prefetchLinks = document.querySelectorAll('link[rel="prefetch"][href*="carte_carte"]')
  prefetchLinks.forEach(link => link.remove())
})
</script>

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