简介

Nuxt 脚本在将第三方脚本集成到 Nuxt 应用程序时，增强了性能、隐私和开发者体验 (DX)。

背景

使用 useHead 可组合函数加载第三方 IIFE 脚本很简单，但在服务器端渲染 (SSR)、延迟加载和类型安全方面会遇到复杂情况。Nuxt 脚本通过优化第三方脚本集成来解决这些挑战，以提高性能、隐私和整体 DX。

第三方脚本挑战

• 跨客户端和服务器端环境的兼容性。
• 应用最佳实践默认值。
• 细粒度优化控制。
• 避免渲染阻塞、隐私问题和性能瓶颈。
• 确保类型安全和脚本验证。
• 第三方服务器的安全注意事项。

第三方如何影响用户体验

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

根据 Chrome 用户体验报告，具有大量第三方资源的 Nuxt 网站通常会显示较低的 交互到下一帧渲染 (INP) 和 最大内容绘制 (LCP) 分数。尽管相关性不能证明因果关系，但实验室测试和 Web Almanac 确认了第三方资源对性能的显著影响。

Nuxt 脚本功能

🏎️ 性能

• 默认情况下，脚本加载仅在 Nuxt 准备就绪时触发。
• 更高级的脚本加载触发机制，独立于实现细节。
• 通过 打包远程脚本 提高脚本加载时间。

😌 开发者体验

• 一个针对常用第三方应用程序的精选脚本注册表。
• 简化的分析事件管理，例如，跟踪页面浏览量。
• 对脚本选项的输入验证。
• 类型安全和 SSR 兼容 API。

🔒 隐私

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