介绍

Nuxt Scripts 在将第三方脚本整合到 Nuxt 应用中时，提升了性能、隐私和开发者体验（DX）。

背景

使用 useHead 组合式函数加载第三方 IIFE 脚本很简单，但在服务器端渲染（SSR）、懒加载和类型安全方面会遇到复杂问题。Nuxt Scripts 通过优化第三方脚本的集成，解决了这些挑战，从而提高性能、隐私和整体开发体验。

第三方脚本的挑战

• 在客户端和服务器端环境中的兼容性。
• 采用最佳实践的默认设置。
• 细粒度的优化控制。
• 避免阻碍渲染、隐私问题和性能瓶颈。
• 确保类型安全和脚本验证。
• 与第三方服务器相关的安全考虑。

第三方如何影响用户体验

第三方资源如分析工具、视频嵌入、地图和社交媒体集成功能增强了网站功能，但并非由网站所有者直接管理。单个资源的性能影响或许很小，但多个资源会显著降低用户体验。脚本尤其可能延迟交互响应并阻碍页面渲染。

根据 Chrome 用户体验报告，拥有众多第三方资源的 Nuxt 站点通常获得较低的 Interaction to Next Paint (INP) 和 Largest Contentful Paint (LCP) 分数。尽管这种相关性不代表因果关系，实验室测试和 Web 年鉴 均证实第三方资源对性能有显著影响。

Nuxt Script 功能

🏎️ 性能

• 脚本加载默认仅在 Nuxt 准备好后触发。
• 更高级的脚本加载触发方式，与具体实现无关。
• 通过远程脚本打包提升脚本加载速度。

😌 开发者体验

• 为常见第三方应用提供精选脚本注册表。
• 简化分析事件管理，例如页面浏览跟踪。
• 脚本选项输入校验。
• 类型安全与 SSR 兼容的 API。

🔒 隐私

• 通过远程脚本打包最小化用户数据暴露。
• 集成的用户同意管理。
• 增强的脚本隐私设置，例如 crossorigin="anonymous" 和 referrerpolicy="no-referrer"。