捆绑远程脚本

背景

当你在你的网站上使用来自其他网站的脚本时，你依赖另一个服务器来加载这些脚本。这会减慢你的网站速度，并引发安全和隐私问题。

常见问题

• 网站速度变慢，因为连接到其他服务器需要时间。
• 如果另一个服务器被黑客入侵，会存在安全风险。
• 你的访客数据可能被其他服务器不当使用。
• 广告拦截器或隐私工具可能会阻止这些脚本运行。

如何解决

通过捆绑这些脚本，你可以自己托管它们，这有助于避免这些问题并保持网站的顺利运行。

工作原理

在构建过程中，你的代码会被检查以查找需要捆绑的 useScript 实例。

当一个脚本被识别为需要捆绑时，它会被下载并保存为一个公共资产，位于 /_scripts/[hash].js。 这里， [hash] 表示脚本 URL 的哈希值。

关于捆绑的重要事项

1. 你需要为你的脚本 URL 和捆绑设置提供静态值。

// GOOD - Static values allow for bundling
useScript('https://example.com/script.js', {
  bundle: true
})
// BAD - Dynamic values prevent bundling
useScript(scriptSrc, {
  bundle: canBundle
})

2. 如果原始脚本在没有 URL 更改的情况下发生更改，则捆绑的版本不会在浏览器缓存中更新。为了处理这个问题，请使用版本化的 URL 或缓存清除查询参数。

用法

脚本可以单独捆绑，也可以使用特定设置在全局范围内捆绑。

脚本选项

要决定是否应该捆绑单个脚本，请使用 bundle 选项。

// Opt-in to bundle this specific script
useScript('https://example.com/script.js', {
  bundle: true,
})

全局捆绑

使用 Nuxt 配置调整所有脚本的默认行为。此示例将所有脚本默认设置为捆绑。

export default defineNuxtConfig({
  scripts: {
    defaultScriptOptions: {
      bundle: true,
    }
  }
})

捆绑的局限性

虽然许多脚本都可以捆绑，但有一些例外情况需要注意。

例如，某些脚本

• 出于安全原因，需要跟踪所有用户交互，例如欺诈检测（例如 Stripe）。
• 必须直接从其原始来源提供服务才能正常运行（例如 Fathom Analytics）。

来自已知注册表的脚本已预先配置为允许或不允许捆绑。对于你自己的脚本，你需要根据具体情况决定是否适合捆绑。

更改资产行为

在你的配置中使用 assets 选项来自定义脚本的捆绑方式，例如更改捆绑脚本的输出目录。

export default defineNuxtConfig({
  scripts: {
    assets: {
      prefix: '/_custom-script-path/',
    }
  }
})

将来更新将提供更多配置选项。