I am making my first application with Nuxt3. I'm having a big problem with the picture tags. Note that the ssr is enabled. I have my pictures tags written like this:
<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>During the build, this causes Nuxt3 to generate link tags to prefetch all my srcset images:
<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>Therefore I get an insane volume of data to preload (until 5Mo!!), which in particular results in a deplorable score on Pagespeed. I tried client-only rendering, dynamic rendering with v-html, with no success. Perhaps it comes from the configuration of vitejs (?), nevertheless I did not manage to obtain conclusive information. Thanks for your help!