Disable prefetch for dynamic imports

[tresko]

Environment

- Operating System: `MacOs`
- Node Version:     `v19.3.0`
- Nuxt Version:     `3.0.0`
- Nitro Version:    `1.0.0`
- Package Manager:  `yarn@1.22.19`
- Builder:          `vite`
- User Config:      `-`
- Runtime Modules:  `-`
- Build Modules:    `-`

Describe the issue

I am using dynamic import to import icons conditionally but I don't want to prefetch them.
This might stack up to many unused icons because it prefetches all icons from the ./icons folder.

When I want to load just Twitter icon, everything is imported.

<InlineIcon name="twitter" />

Code

<template>
  <Icon />
</tempalte>

<script setup lang="ts">
const props =   defineProps<{name: string}>()

const Icon = computed(() => defineAsyncComponent(() => import(`../icons/${props.name}.svg?component`)));
</script>

[Baroshem]

Have you maybe tried preloading these components? I think by default async components are prefetched by you should be able to manually oreload them

https://nuxt.com/docs/api/utils/preload-components

[SebastianBoergers]

Had a similar problem some months ago. With ALL Font-Awesome Icons including all premium styles etc. the build process never finished. It barely managed to (took 10+ minutes afaik instead of the usual 1~2) with just two sets active.

[manniL]

Another part of the issue as noted in #18723:

When dynamically importing a module (dayjs as an example) it get's added to the head of the page with rel="prefetch", even if not used right away.

Related: #14584

[Pysdbi]

Why can't I control the file download type? LightHouse "First Contentful Paint" shows from 2.9 seconds due to <link rel="preload" ...>

[Zorii4]

I have the same problem.
First Contentful Paint: 1.8s but my project almost empty...

[Pysdbi]

What do you mean by "workaround available"?

[danielroe]

It is possible to remove dynamic import prefetching in the build:manifest hook.

nuxt.hook('build:manifest', (manifest) => {
  for (const key in manifest) {
    // or other logic
    manifest[key].dynamicImports = []
  }
})

[Pysdbi]

I zeroed manifest.dynamicImports, but it didn't solve problem with preload.

[danielroe]

In that case, this is triggered directly by vite's preloading behaviour. If you can provide a reproduction, I can investigate further.

Note: some situations (but likely not the original reported issue here) might be somewhat ameliorated by #19008 which will be included in v3.2.1.

[madsleejensen]

I did a super hacky workaround because i couldnt find a better solution:

added the following nitro plugin at server/plugins/prefetch.js

import * as cheerio from 'cheerio';

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook('render:html', (html, { event }) => {
    /**
     * @WORKAROUND: remove auto generated <link rel="prefetch" /> tags from the head
     * currently it automatically adds prefetch tags for all assets imported in the page
     */
    // https://github.com/nuxt/nuxt/issues/18376#issuecomment-1431318970
    // https://github.com/nuxt/nuxt/issues/18376

    html.head = html.head.map(head => {
      const $ = cheerio.load(head);
      $('link[rel=prefetch]').each(function() {
        $(this).remove();
      })

      return $.root().find('head').contents();
    })
  })
})

Looking forward to remove this workaround when a fix is found, the main problem i had was that all images loaded via import MyImage from '~/assets/test.png' would be prefetch messing up the LCP

[Pysdbi]

// file path: `./nuxt.config.js`
export default {
  // other params

  render: {
    bundleRenderer: {
      shouldPrefetch: () => false,
      shouldPreload: () => false,
    },
  },
}

This method does not work on nuxt 3.2.2

[konsavv]

@Pysdbi I have the version "nuxt": "^ 3.1.1" . I tried what you suggest and it doesn't work.

[scofield-ua]

Nothing from above doesn't really helps.

Setting dynamicImports to [] removes module preloading from the source file, but when you open it in the browser entry.js will add those modulepreload links again.

I was even trying to set it directly as vite extend config like this:

'vite:extend' ({ nuxt, config }) {
    config.build.modulePreload = { polyfill: false };
    config.build.resolveDependencies = () => [];    

    return config;
}

but result is the same.

vitejs/vite#9938 (comment)

[scofield-ua]

Looks like in my case, the problem was related to prefetch feature of NuxtLink, which is turned on by default and will prefetch css and js when link is in user's viewport.

So adding no-prefetch and this solved prefetching issues for me.

[Dreckr]

In my case, the issue was that every image was being prefetched. All versions of an image used on img/picture srcset's were prefetched, and there was a weird behavior where Chrome was always prioritizing and waiting for the highest pixel density version. That obviously was slowing down my initial page load.

Inspired by @danielroe's workaround, I made my own that disables prefetch for image assets:

nuxt.hook('build:manifest', (manifest) => {
  const keysToRemove = []

  for (const key in manifest) {
    const file = manifest[key]

    if (file.assets) {
      file.assets = file.assets
        .filter(
          (asset: string) =>
            !asset.endsWith('.webp') &&
            !asset.endsWith('.jpg') &&
            !asset.endsWith('.png')
        )
    }
  }
})

The result was a 300ms faster initial page load and lot less images being transfered unnecessarily in my case, so I'm sharing this workaround here so that anybody can use it.

[lewebsimple]

I'm getting the same kind of problems when auto-importing SVG icons from a directory using vite-svg-loader. The page load (in development mode at least) contains all the SVG files from the auto-imported directory.

This only occurs on 3.4.2 and forcing nuxt version 3.4.1 doesn't exhibit this behavior.

Reproduction here: https://stackblitz.com/edit/github-2upgzp

[AdrianGrochowski]

@Dreckr where should I put this code in my Nuxt application ?

[phaust]

In my case, the issue was that every image was being prefetched. All versions of an image used on img/picture srcset's were prefetched, and there was a weird behavior where Chrome was always prioritizing and waiting for the highest pixel density version. That obviously was slowing down my initial page load.

Inspired by @danielroe's workaround, I made my own that disables prefetch for image assets:

nuxt.hook('build:manifest', (manifest) => {
  const keysToRemove = []

  for (const key in manifest) {
    const file = manifest[key]

    if (file.assets) {
      file.assets = file.assets
        .filter(
          (asset: string) =>
            !asset.endsWith('.webp') &&
            !asset.endsWith('.jpg') &&
            !asset.endsWith('.png')
        )
    }
  }
})

The result was a 300ms faster initial page load and lot less images being transfered unnecessarily in my case, so I'm sharing this workaround here so that anybody can use it.

Thank you so much @Dreckr!
I had similar issues with img/picture srcsets and your workaround fixed them.

[phaust]

@Dreckr where should I put this code in my Nuxt application ?

I put the workaround in the nuxt.config.ts file.

export default defineNuxtConfig({
  …
  hooks: {
    'build:manifest': (manifest) => {
      const keysToRemove = []

      for (const key in manifest) {
        const file = manifest[key]

        if (file.assets) {
          file.assets = file.assets
            .filter(
              (asset: string) =>
                !asset.endsWith('.webp') &&
                !asset.endsWith('.jpg') &&
                !asset.endsWith('.png')
            )
        }
      }
    }
  },
  …
})

[max-arias]

Anyone have a workaround for the client? From what I can gather most of these workarounds only affect the server/TTFB. Unless Im wrong?

[yaquawa]

any updates ?!

[This-is-ellesar]

any updates ?!

[Red-Asuka]

How to completely disable prefetch? This has a significant impact on website performance, especially in mobile device scoring.

[akumanara]

I am also having this problem. it prefetches the swiper bundle from another page other than the page i am visiting and i get a bad rating on pagespeed

[JieJieeee]

What exactly can I do to remove preload&prefetch?I searched all over the internet and couldn't help it

[or2e]

@JieJieeee
at the moment, there's a way

Stay tuned for further updates on this topic here

[brettsprads]

This is still not working, in 2024 there still isn't a Nuxt 3 way to stop preloading / prefetching.

[RomanSkrypnik]

@danielroe Any updates?
It hits project performance

[jmdmacapagal]

any updates regarding prefetching of components?

[simkuns]

I did it like this:

export default defineNuxtConfig(() => {
  hooks: {
    'build:manifest'(manifest) {
      for (const key in manifest) {
        const file = manifest[key];

        if (file.prefetch) {
          file.prefetch = false;
        }

        // Prevents inclusion of <link rel="stylesheet" /> during SSR since styles are inlined anyway (checked with Postman)
        if (file.resourceType === 'script') {
          file.css = [];
        }
      }
    },
  },
});

and every component inside pages/layouts which is below the fold is wrapped in NuxtLazyHydrate and prefixed with Lazy

<template>
  <!-- components below the fold  -->
  <NuxtLazyHydrate when-visible>
    <LazyExampleComponent />
  </NuxtLazyHydrate>
</template>

this way I was able to improve Lighthouse score from 29 to 93.

[dsvgl]

Thx @simkuns will test it out!
For reference, nuxt-lazy-hydrate is great: https://github.com/Baroshem/nuxt-lazy-hydrate