Warmup Strategy

Background

Nuxt Scripts will insert relevant warmup link tags to optimize the loading of your scripts. Optimizing for the quickest load after Nuxt has finished hydrating.

For example if we have a script like so:

useScript('/script.js')

This code will load in /script.js on the onNuxtReady event. As the network may be idle while your Nuxt App is hydrating, Nuxt Scripts will use this time to warmup the script by inserting a preload tag in the head of the document.

<link rel="preload" href="/script.js" as="script" fetchpriority="low">

This behavior only applies when using the client or onNuxtReady Script Triggers. To customize the behavior further, you can use the warmupStrategy option.

warmupStrategy

You can use the warmupStrategy option to customize the link tag inserted for the script. The option can be a function that returns an object with the following properties:

• • false - Disable warmup.
• • 'preload' - Preload the script, use when you load the script immediately.
• • 'preconnect' or 'dns-prefetch' - Preconnect to the script origin, use when you know you will load a script within 10 seconds. Only works when loading a script from a different origin, will fallback to false if the origin is the same.

All of these options can also be passed to a callback function, which can be useful when you have a dynamic trigger for the script.

warmup

You can call the warmup function explicitly to add preconnect or preload link tags for a script. This only works the first time you call the function.

This can be useful when you know that you are going to load the script shortly.

const script = useScript('/video.js', {
  trigger: 'manual'
})
// warmup the script when we think the user may need the script
onVisible(videoContainer, () => {
  script.warmup('preload')
})
// load it in
onClick(videoContainer, () => {
  script.load()
})