Nuxt.js: Preload async chunks on a specific route

[jeanphilippeds]

What problem does this feature solve?

Hello,

I wonder if it's possible to preload/prefetch async chunks for a specific route.
I tried to use bundleRenderer/shouldPreload but it's only available on nuxt.config.js, right?

Any hint about this?

_{This feature request is available on Nuxt community (#c9860)}

[pimlie]

Are you talking about doing this dynamically during runtime or you want a specific route to _always_ be preloaded?

[jeanphilippeds]

Let's consider I'm loading an async chunk xyz.js on route B, and not on route A. I'd like to be able to always preload xyz.js when I'm landing on route B.

[gangsthub]

You can already do this thanks to "webpack magic comments" (what a name 😅):

// inside your component, or page or layout...

const MyPreloadedComponent = () =>
  import(
    /* webpackPreload: true */
    /* webpackChunkName: "MyPreloadedComponent" */ '~/components/MyPreloadedComponent'
  )

export default {
  components: {
    MyPreloadedComponent,
  },
}

Dynamic import will make the chunk to be loaded asynchronously and the /* webpackPreload: true */ will make a request with the preload option. The webpackChunkName is to help you identify those chunks in the Network tab on development.