scripts
@nuxt/scripts

在不牺牲性能的情况下添加第三方脚本。

nuxt-scripts-social-card

npm versionnpm downloadsLicenseNuxtVolta

Nuxt Scripts

为 Nuxt 应用中的第三方脚本提供更好的隐私保护、性能和开发体验 (DX)。

!重要 Nuxt Scripts 目前处于测试阶段,请谨慎使用,部分 API 可能会有所变动。

功能

  • 🪨 基于 Unhead 脚本加载 构建
  • 🎁 集成 20 多种第三方脚本,并具有细粒度的性能优化
  • 🏎️ 性能:支持自托管、高级脚本加载触发器以及最佳实践默认设置。
  • 🕵️ 隐私:默认保护最终用户身份,提供脚本同意管理 API。
  • 🪵 开发工具:查看脚本状态并观察函数日志
  • 🚀 0 依赖,约 2kb 的极简运行时

背景

使用 useHead 可组合函数加载第三方 IIFE 脚本非常简单。然而,在涉及 SSR(服务端渲染)、懒加载和类型安全时,事情很快就会变得复杂。

Nuxt Scripts 的创建旨在解决这些及更多问题,目标是使第三方脚本性能更高、隐私保护更好,并提供更好的整体开发体验。

🚀 快速开始

要开始使用,只需运行

npx nuxi@latest module add scripts

就是这样!Nuxt Scripts 模块将被下载并添加到您的 Nuxt 配置 modules 中。

⛰️ 后续步骤

需要一些灵感来开始使用 Nuxt Scripts?尝试以下内容:

  1. 🎉 通过 纸屑 (Confetti) 教程 让屏幕飘满表情符号。
  2. 📚 了解 脚本加载 的工作原理。
  3. 🔍 浏览 脚本注册表,获取流行的预配置第三方脚本。
  4. 🚀 使用 useScript全局脚本 加载其他脚本。
  5. 🔨 通过 打包 (Bundling)同意管理 微调您的性能和隐私设置。

⚖️ 许可证

采用 MIT 许可证 开源。