useScriptTriggerIdleTimeout

useScriptTriggerIdleTimeout 函数的 API 文档。

创建一个触发器，在 Nuxt 准备就绪后，经过空闲超时后加载脚本。这对于非关键脚本非常有用，可以延迟加载以进一步减少对初始页面性能的影响。

函数签名

function useScriptTriggerIdleTimeout(options: IdleTimeoutScriptTriggerOptions): Promise<boolean>

参数

export interface IdleTimeoutScriptTriggerOptions {
  /**
   * 在加载脚本之前等待的超时时间（毫秒）。
   */
  timeout: number
}

返回值

返回一个 Promise，当超时完成且应加载脚本时，解析为 true，如果触发器被取消，则解析为 false。

Nuxt 配置用法

为了方便起见，您可以直接在 nuxt.config 中使用此触发器，而不需要显式调用组合函数：

export default defineNuxtConfig({
  scripts: {
    registry: {
      googleAnalytics: [{
        id: 'GA_MEASUREMENT_ID'
      }, {
        trigger: { idleTimeout: 3000 } // Nuxt 准备后 3 秒加载
      }]
    }
  }
})

示例

基本用法

在 Nuxt 准备就绪后 5 秒加载脚本：

const script = useScript({
  src: 'https://example.com/analytics.js',
}, {
  trigger: useScriptTriggerIdleTimeout({ timeout: 5000 })
})

延迟加载分析脚本

非常适合不需要立即加载的分析脚本：

<script setup lang="ts">
// 在 3 秒延迟后加载 Google Analytics
const { $script } = useScriptGoogleAnalytics({
  id: 'GA_MEASUREMENT_ID'
}, {
  trigger: useScriptTriggerIdleTimeout({ timeout: 3000 })
})

// 脚本加载完成后追踪事件
watch($script.status, (status) => {
  if (status === 'loaded') {
    // 现在可以使用分析功能
    gtag('event', 'page_view')
  }
})
</script>

渐进增强

延迟加载增强脚本以优先保证关键资源：

<script setup lang="ts">
// 10 秒后加载聊天窗口脚本
const chatScript = useScript({
  src: 'https://widget.intercom.io/widget/abc123'
}, {
  trigger: useScriptTriggerIdleTimeout({ timeout: 10000 })
})

// 5 秒后加载搜索增强脚本
const searchScript = useScript({
  src: 'https://cdn.example.com/search-enhancement.js'
}, {
  trigger: useScriptTriggerIdleTimeout({ timeout: 5000 })
})
</script>

最佳实践

  • 使用合适的超时时间：分析脚本建议 3-5 秒，窗口小部件建议 5-10 秒，非必要功能更长时间
  • 考虑用户行为：高互动页面使用较短超时，内容为主页面使用较长超时
  • 监控性能：确保延迟加载确实改善了核心网页指标（Core Web Vitals）
  • 结合其他触发器使用：与交互触发器结合，获得最佳用户体验

useScriptTriggerElement

useScriptTriggerElement 函数的 API 文档。

useScriptTriggerInteraction

useScriptTriggerInteraction 函数的 API 文档。