预热策略

背景

Nuxt Scripts 会插入相关的预热 link 标签以优化脚本的加载。优化目的是在 Nuxt 完成水合（hydration）后实现最快的加载速度。

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

useScript('/script.js')

这段代码将在 onNuxtReady 事件时加载 /script.js。由于在 Nuxt 应用水合期间网络可能闲置，Nuxt Scripts 会利用这段时间通过在文档头部插入 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 函数可以显式调用，为脚本添加预连接或预加载的 link 标签。该操作仅在函数首次调用时有效。

当您确定脚本即将被加载时，该功能非常有用。

const script = useScript('/video.js', {
  trigger: 'manual'
})
// 当我们认为用户可能需要该脚本时，预热脚本
onVisible(videoContainer, () => {
  script.warmup('preload')
})
// 加载脚本
onClick(videoContainer, () => {
  script.load()
})