---
title: "预热策略"
description: "自定义脚本所使用的预加载或预连接策略。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/docs/guides/warmup"
last_updated: "2026-08-11T09:33:10.171Z"
---

## 背景

Nuxt Scripts 可以在延迟脚本加载之前插入一个预热 `<link>`。请考虑以下脚本：

```ts
useScript('/script.js')
```

`/script.js` 使用默认的 `onNuxtReady` 触发器。当 Nuxt 进行 hydration 时，Nuxt Scripts 会向文档头部添加一个低优先级的预加载：

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

自动预热适用于 `client` 和 `onNuxtReady` [脚本触发器](/docs/guides/script-triggers)。使用 `warmupStrategy` 更改它。

这些策略对应于浏览器的[预加载和连接预热提示](https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Speculative_loading)。请谨慎选择：预加载每个延迟脚本会使这些提示与当前页面所需的资源争夺资源。

## `warmupStrategy`

`warmupStrategy` 接受：

- `false`：禁用预热。
- `'preload'`：预加载脚本。当脚本将立即加载时使用此选项。
- `'preconnect'` 或 `'dns-prefetch'`：预热脚本的源。这些值仅适用于跨源脚本；同源脚本不会接收到 link 标签。

## `warmup`

当应用状态表明手动脚本很快可能会被加载时，直接调用 `warmup()`：

```ts
const script = useScript('/video.js', {
  trigger: 'manual'
})
// 视频进入视口时开始下载
onVisible(videoContainer, () => {
  script.warmup('preload')
})
// 点击后执行
onClick(videoContainer, () => {
  script.load()
})
```