Nuxt 团队与 Google 的 Chrome Aurora 团队合作，很高兴宣布 Nuxt Scripts 公开测试版发布。
Nuxt Scripts 是一种更好的处理第三方脚本的方式，它提供了更好的性能、隐私、安全性以及开发者体验。
Nuxt Scripts 的由来
一年多以前，Daniel 发布了最初的 Nuxt Scripts RFC。该 RFC 提出一个模块，该模块将“允许管理和优化第三方脚本，遵循高性能和合规网站的最佳实践”。
由于我在解决与第三方脚本相关的性能问题方面有 个人经验，我知道这些性能优化有多么困难。尽管如此，我还是渴望解决这个问题并接管了该项目。
以 RFC 作为想法的种子，我开始使用 Unhead 原型化它的 样子。
在思考我到底想构建什么时，我发现真正的问题不仅仅是如何加载“优化”的第三方脚本，而是如何使使用第三方脚本的整体体验更好。
为什么要构建第三方脚本模块？
94% 的网站至少使用一个第三方提供商，平均每个网站有 五个第三方提供商。
我们知道第三方脚本并不完美；它们减慢了网站速度，导致隐私和安全问题，并且使用起来很麻烦。
然而，它们从根本上来说是有用的，并且短期内不会消失。
通过探索第三方脚本的问题，我们可以看到可以在哪里进行改进。
😒 开发者体验：全栈难题
让我们逐步了解如何使用虚构的 tracker.js 脚本（该脚本将 track 函数添加到窗口）向您的 Nuxt 应用添加第三方脚本。
我们首先使用 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，加载第三方脚本也会干扰此注水过程。这会减慢网络速度并阻塞主线程，从而导致用户体验下降和不良的 Core Web Vitals。
Chrome 用户体验报告显示，具有大量第三方资源的 Nuxt 网站通常具有较差的 与下一次绘制的交互 (INP) 和 最大内容绘制 (LCP) 分数。
要查看第三方脚本如何降低性能，我们可以查看 Web Almanac 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 地图、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，我们创建了一个教程来帮助您快速入门。
鸣谢
并感谢早期的贡献者。
