用途
debug-perf 用于诊断和修复 Next.js 应用在开发与生产环境中的性能问题。触发场景包括：调查热重载循环、CPU 飙升、打包体积膨胀或服务端渲染缓慢。该技能在开发和生产两种环境下均可工作。
主要能力与使用方式
技能以固定步骤推进排查，每一步给出对应的命令或代码修改方式。
1. 检查编译循环
ls -lh /tmp/*.log 2>/dev/null
# If any log is >100MB, a hot reload loop is running
若任一日志超过 100MB，说明存在热重载循环。同时在开发服务器输出中查找重复的模块解析错误。常见原因是 geist/font/* 导入与 Turbopack 冲突，修复方式是改用 next/font/google：
// layout.tsx — replace geist package imports
import { Geist, Geist_Mono } from "next/font/google";
const GeistSans = Geist({ subsets: ["latin"], variable: "--font-geist-sans" });
const GeistMono = Geist_Mono({ subsets: ["latin"], variable: "--font-geist-mono" });
2. 检查文件监视范围
如果项目在运行时读取自身目录之外的文件：
// lib/something.ts
const ROOT = path.join(process.cwd(), ".."); // watches the parent dir
Turbopack 会监视运行时文件读取所引用的任何目录，对 .. 中文件的编辑会触发全量重编译。修复方式：将读取范围限制在项目目录内，或在 next.config.ts 中使用 turbopack: {} 暂时抑制警告，同时规划正式修复。
3. 检查未缓存的磁盘读取
grep -rn "fs.readFileSync\\|fs.readdirSync" lib/ app/ src/ 2>/dev/null
任何读取文件并被服务端组件调用的函数，会在每次请求时执行。应添加模块级缓存：
let cache: ReturnType<typeof loadData> | null = null;
export function loadData() {
if (cache) return cache;
// ... read files ...
cache = result;
return cache;
}
4. 分析打包（生产环境）
npx @next/bundle-analyzer
# or add to next.config.ts:
# bundleAnalyzer: { enabled: process.env.ANALYZE === 'true' }
关注点：可改为服务端组件的大型客户端组件、跨 chunk 的重复包、不应出现在客户端包中的包。
5. 查找昂贵的服务端组件
在开发环境中，服务端组件除非用 cache() 包裹，否则每次请求都会重新渲染。搜索：
grep -rn "await fetch\\|readFileSync\\|prisma\\.\\|supabase\\." app/ --include="*.tsx" --include="*.ts"
服务端组件中任何未用 import { cache } from 'react' 包裹的昂贵调用，都会在每次页面加载时执行。
6. 报告
说明：根因（循环、文件监视、未缓存读取、打包）、改动的文件与改动内容、修复后的预期行为（空闲 CPU、热重载耗时）。
适用场景
- Next.js 开发服务器 CPU 占用异常、热重载缓慢或陷入循环
- 生产环境打包体积过大、客户端包中混入不应有的依赖
- 服务端组件因未缓存的文件读取或数据查询而拖慢页面
限制
资料未提供该技能的安装方式、依赖要求、支持的命令行入口、适用的 Next.js 版本范围，也未说明是否存在自动化执行流程或仅作为人工排查清单使用。以上信息暂未提供。