Nuxt 团队与 Google 的 Chrome Aurora 团队合作，很高兴地宣布 Nuxt Scripts 的公开测试版发布。
Nuxt Scripts 是一种使用第三方脚本的更好方法，它提供了改进的性能、隐私、安全性和开发人员体验。
获取 Nuxt Scripts
一年前，Daniel 发布了最初的 Nuxt Scripts RFC。RFC 提出了一种模块，该模块将“允许管理和优化第三方脚本，遵循高性能和合规网站的最佳实践”。
拥有解决与第三方脚本相关的性能问题的 个人经验，我知道这些性能优化可能有多么困难。尽管如此，我仍然渴望解决这个问题，并接手了这个项目。
以 RFC 作为想法的种子，我开始使用 Unhead 对它可能 看起来像什么 进行原型设计。
思考我到底想构建什么，我发现真正的问题不仅仅是如何加载“优化”的第三方脚本，而是如何使使用第三方脚本的整体体验变得更好。
为什么要构建第三方脚本模块？
94% 的网站至少使用了一个第三方提供商，平均每个网站有 五个第三方提供商。
我们知道第三方脚本并不完美；它们 减慢了网页速度，导致隐私和安全问题，并且难以使用。
但是，它们在根本上是有用的，并且在短期内不会消失。
通过探索第三方脚本的问题，我们可以看到可以在哪些方面进行改进。
😒 开发人员体验：一个全栈难题
让我们逐步将第三方脚本添加到您的 Nuxt 应用程序中，使用一个虚构的 tracker.js 脚本，该脚本将 track 函数添加到窗口中。
我们首先使用 useHead 加载脚本。
useHead({ scripts: [{ src: '/tracker.js', defer: true }] })
但是，现在让我们尝试让脚本功能在我们的应用程序中正常工作。
在 Nuxt 中使用第三方脚本时，以下步骤很常见
- 一切都必须包装起来以确保 SSR 安全。
- 脚本是否已加载的不可靠检查。
- 增强窗口对象以进行类型检查。
<script setup>
// ❌ Oops, window is not defined!
// 💡 The window can't be directly accessed if we use SSR in Nuxt.
// 👉 We need to make this SSR safe
window.track('page_view', useRoute().path)
</script>
🐌 性能：“为什么我在 Lighthouse 上得不到 100 分？”
对于访问者开始与您的 Nuxt 站点交互，需要下载应用程序包，并且 Vue 需要水化应用程序实例。
加载第三方脚本可能会干扰此水化过程，即使使用 async 或 defer 也是如此。这会减慢网络速度并阻塞主线程，导致用户体验下降和 核心 Web 指标 不佳。
Chrome 用户体验报告 显示，具有大量第三方资源的 Nuxt 站点通常具有较差的 交互到下一帧绘制 (INP) 和 最大内容绘制 (LCP) 分数。
要了解第三方脚本如何降低性能，我们可以查看 2022 年网络年鉴。该报告显示，前 10 个第三方脚本的平均中位阻塞时间为 1.4 秒。
🛡️ 隐私与安全：不做恶？
在前 10,000 个站点中，有 58% 的站点具有第三方脚本，这些脚本 交换存储在外部 Cookie 中的跟踪 ID，这意味着即使禁用了第三方 Cookie，它们也可以跨站点跟踪用户。
虽然在许多情况下我们使用提供商时受到限制，但我们应尽量减少泄露最终用户数据的数量。
当我们确实承担隐私影响时，然后可能难以在我们的隐私政策中准确传达这些信息，并建立遵守 GDPR 等法规所需的同意管理。
使用第三方脚本时的安全性也是一个问题。第三方脚本是恶意行为者常见的攻击媒介，大多数脚本不提供 integrity 哈希，这意味着它们可能会被破坏并在任何时候将恶意代码注入您的应用程序。
Nuxt Scripts 如何解决这些问题？
可组合：useScript
此可组合项位于 <script> 标签和添加到 window.{thirdPartyKey} 的功能之间。
对于 <script> 标签，可组合项
- 完全了解脚本的加载和错误状态
- 默认情况下，在 Nuxt 水化应用程序时加载脚本，以获得略微更好的性能。
- 限制
crossorigin和referrerpolicy以提高隐私和安全性。 - 提供了一种方法来 延迟加载脚本，直到您需要它为止。
对于脚本 API，它
- 提供脚本函数的完全类型安全
- 添加一个代理层，允许您的应用程序在脚本函数处于不安全上下文中时运行（SSR、脚本加载之前、脚本被阻止）
const { proxy, onLoaded } = useScript('/hello.js', {
trigger: 'onNuxtReady',
use() {
return window.helloWorld
}
})
onLoaded(({ greeting }) => {
// ✅ script is loaded! Hooks into Vue lifecycle
})
// ✅ OR use the proxy API - SSR friendly, called when script is loaded
proxy.greeting() // Hello, World!
declare global {
interface Window {
helloWorld: {
greeting: () => 'Hello World!'
}
}
}
脚本注册表
脚本注册表 是常见第三方脚本的第一方集成的集合。截至发布，我们支持 21 个脚本，并且更多脚本即将推出。
这些注册表脚本是围绕 useScript 的微调包装器，具有完全的类型安全性、脚本选项的运行时验证（仅限开发）和环境变量支持
例如，我们可以查看 Fathom Analytics 脚本。
const { proxy } = useScriptFathomAnalytics({
// ✅ options are validated at runtime
site: undefined
})
// ✅ typed
proxy.trackPageview()
外观组件
注册表包含几个 外观组件，例如 Google Maps、YouTube 和 Intercom。
外观组件是“伪”组件，在第三方脚本加载时进行水化。外观组件存在权衡，但可以极大地提高您的性能。有关更多信息，请参阅 什么是外观组件？ 指南。
Nuxt Scripts 提供外观组件作为可访问的但无头的，这意味着它们默认情况下没有样式，但添加了必要的 a16y 数据。
点击加载
同意管理和元素事件触发器
useScript 可组合项使您可以完全控制脚本的加载方式和时间，方法是提供自定义 trigger 或手动调用 load() 函数。
在此基础上，Nuxt Scripts 提供了高级触发器以使其更加容易。
const cookieConsentTrigger = useScriptTriggerConsent()
const { proxy } = useScript<{ greeting: () => void }>('/hello.js', {
// script will only be loaded once the consent has been accepted
trigger: cookieConsentTrigger
})
// ...
function acceptCookies() {
cookieConsentTrigger.accept()
}
// greeting() is queued until the user accepts cookies
proxy.greeting()
捆绑脚本
在许多情况下，我们从我们无法控制的域加载第三方脚本。这可能导致许多问题
- 隐私：第三方脚本可以跨站点跟踪用户。
- 安全：第三方脚本可能会被破坏并注入恶意代码。
- 性能：额外的 DNS 查询会减慢页面加载速度。
- 开发人员体验：已同意的脚本可能会被广告拦截器阻止。
为了缓解这种情况，Nuxt Scripts 提供了一种方法将第三方脚本捆绑到您的公共目录中，而无需任何额外的工作。
useScript('https://cdn.jsdelivr.net.cn/npm/js-confetti@latest/dist/js-confetti.browser.js', {
bundle: true,
})
脚本现在将从您自己的域上的 /_scripts/{hash} 提供服务。
待续
正如我们所看到的，对于开发人员和最终用户来说，有很多机会改进第三方脚本。
Nuxt Scripts 的初始版本已经解决了一些问题，但我们还有很多工作要做。
路线图上的下一项是
我们希望得到您的贡献和支持。
入门
要开始使用 Nuxt Scripts，我们创建了一个 教程 来帮助您快速上手。
鸣谢
并感谢早期贡献者。
