预热策略

背景

Nuxt 脚本将插入相关的预热 link 标签，以优化脚本的加载。优化 Nuxt 完成水合后的最快加载速度。

例如，如果我们有以下脚本

useScript('/script.js')

此代码将在 onNuxtReady 事件上加载 /script.js。由于您的 Nuxt 应用正在水合时网络可能处于空闲状态，因此 Nuxt 脚本将利用这段时间通过在文档的 head 中插入 preload 标签来预热脚本。

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

只有当我们使用 client 或 onNuxtReady 脚本触发器 时，才会应用此行为。为了进一步自定义行为，我们可以使用 warmupStrategy 选项。

warmupStrategy

warmupStrategy 选项可用于自定义为脚本插入的 link 标签。该选项可以是一个返回具有以下属性的对象的函数

• • false - 禁用预热。
• • 'preload' - 预加载脚本，在立即加载脚本时使用。
• • 'preconnect' 或 'dns-prefetch' - 预连接到脚本源，当您知道脚本将在 10 秒内加载时使用。仅在从不同源加载脚本时有效，如果源相同，将回退到 false。

所有这些选项也可以传递给回调函数，这在脚本具有动态触发器时非常有用。

warmup

warmup 函数可以显式调用，为脚本添加预连接或预加载链接标签。这将仅在第一次调用函数时起作用。

当您知道脚本很快将被加载时，这将非常有用。

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()
})