Nuxt Hints
一个 Nuxt 模块，可在浏览器中直接提供有关应用程序性能、可访问性和安全性的实时反馈。
Nuxt Hints 直接集成到 Nuxt DevTools 中，为您提供可操作的见解，以改善 Web 指标、修复注水（hydration）不匹配，并审核第三方脚本，而无需离开开发环境。
入门指南
要安装并添加该模块，您可以运行以下命令
npx nuxt module add hints
该模块现已自动安装并添加到您的 nuxt.config.ts 中。现在您可以打开您的 Nuxt 应用，转到 DevTools，并点击 Nuxt Hints 图标即可开始使用。
功能
- 🚀 丰富的 DevTools UI：Nuxt DevTools 中的专属选项卡，用于可视化问题、检查元素并获取建议。
- 💧 注水（Hydration）不匹配调试：并排对比服务端渲染和客户端注水后的 HTML，精确定位不匹配的原因。
- ⚡️ Web 指标分析：LCP、INP 和 CLS 的实时指标，并附带详细的归因分析和针对特定元素的优化建议。
- 📦 第三方脚本审核：用于监控性能、识别渲染阻塞脚本并获取安全建议的仪表板。
- 🧩 未使用组件检测：检测在 SSR 或注水期间未渲染的静态导入组件，并建议对其进行懒加载以减小包体积。
- 🔍 交互式诊断:
- 悬停高亮：在 DevTools 中将鼠标悬停在问题上，即可在页面上高亮显示对应的元素。
- 点击检查：点击即可在代码编辑器中直接打开组件源文件。
- 💡 可操作的控制台警告：清晰简洁的控制台消息，引导您采用最佳实践并进行性能改进。
Devtools 内部可视化界面
Nuxt Hints 在 Nuxt DevTools 面板内提供了一个丰富且交互式的界面。
主页
一个中心枢纽，可概览所有检测到的问题。
Web 指标
深入了解核心 Web 指标。查看 LCP、INP 和 CLS 的详细归因，检查出现问题的元素，并获取针对具体上下文的建议。
注水（Hydration）检查器
使用强大的并排差异对比视图调试注水不匹配问题。查看服务端渲染的 HTML 与客户端结果之间的精确差异。
第三方脚本
分析页面上的所有第三方脚本。仪表板会显示加载时间、渲染阻塞状态和安全属性，帮助您识别并缓解性能瓶颈。
未使用导入组件检测（懒加载）
识别在 SSR 或初始注水期间从未渲染的静态导入组件。模块建议将其转换为懒加载组件，以减少最终用户的初始包体积。
工作原理
性能监控
Nuxt Hints 使用 web-vitals 来收集核心 Web 指标，并自动记录任何需要改进的指标。它会监听 INP、LCP 和 CLS，并为每一项提供详细的归因。
注水（Hydration）不匹配检测
该模块挂载到 Vue 的注水过程中，用于比较服务端渲染的 DOM 和客户端 DOM。当检测到不匹配时，它会捕获注水前后的 HTML 以供检查。
第三方脚本分析
结合使用 Nitro 插件和客户端观察器，Nuxt Hints 会追踪页面上加载的每一个脚本，测量其性能并分析其属性。
未使用组件检测（懒加载）
在构建时，Vite 插件会分析您的组件导入，识别静态导入的 .vue 组件。在运行时，模块会追踪哪些组件在 SSR 和初始注水期间真正进行了渲染。页面加载完成后，任何未被渲染的导入组件都会被标记为懒加载候选对象。
建议会报告到控制台，并通过服务器发送事件（Server-Sent Events）发送到 DevTools UI，您可以在那里按路由查看它们并忽略已处理的条目。建议的修复方法是在组件前添加 Lazy 前缀（例如 <LazyHeavyComponent>），或者使用 defineAsyncComponent，这样它只会在需要时下载。
HTML Validate 集成
Nuxt Hints 内置了由 html-validate 提供支持的 HTML 验证功能。对于每一个服务端渲染的响应，该模块都会拦截 HTML 输出并运行 html-validate 进行检测。
控制台输出示例
当 Nuxt Hints 检测到问题时，您会在浏览器控制台中看到清晰的警告。
[@nuxt/hints:performance] LCP Element should not have `loading="lazy"`
Learn more: https://webdev.org.cn/optimize-lcp/#optimize-the-priority-the-resource-is-given
[@nuxt/hints] Third-party script "https://cdn.example.com/script.js" is missing crossorigin attribute.
Consider adding crossorigin="anonymous" for better security and error reporting.
开发
# Install dependencies
pnpm install
# Generate type stubs
pnpm run dev:prepare
# Develop with the playground
pnpm run dev
# Build the playground
pnpm run dev:build
# Run ESLint
pnpm run lint
# Run Vitest
pnpm run test
pnpm run test:watch
# Release new version
pnpm run release