mcpField
D
debug-perf

debug-perf

github.com/tushaarmehtaa开发1246 次安装2 周前更新
代码仓库

关于 debug-perf

debug-perf 是用于诊断 Next.js 应用变慢或过热的技能，适用于开发和生产环境。它检查编译循环、文件监视、磁盘读取、打包体积及耗时的服务端组件，并汇报原因和改动。

主要功能

  1. 01检测编译与热重载循环
  2. 02检查文件监视范围
  3. 03查找未缓存的磁盘读取
  4. 04分析生产环境打包体积
  5. 05定位耗时的服务端组件
  6. 06汇报原因与改动

适用场景

  1. 01排查开发时 CPU 占用过高
  2. 02追踪反复重新编译
  3. 03减少重复读取导致的页面延迟
  4. 04发现过大的客户端 Bundle

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/tushaarmehtaa/tushar-skills --skill debug-perf

安装后在 Claude Code 中输入/debug-perf确认已加载。

详细介绍

诊断运行缓慢或过热的 Next.js 应用。适用于开发和生产环境。

步骤

1. 检查编译循环
ls -lh /tmp/*.log 2>/dev/null
# If any log is >100MB, a hot reload loop is running

检查开发服务器输出中是否有重复的模块解析错误。常见原因：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' }

检查以下问题：可改为服务器组件的大型客户端组件、分散在多个代码块中的重复软件包、不应包含在客户端打包内容中的软件包。

5. 找出开销大的服务器组件

除非用 cache() 包装，否则服务器组件在开发环境中会在每次请求时重新渲染。搜索：

grep -rn "await fetch\|readFileSync\|prisma\.\|supabase\." app/ --include="*.tsx" --include="*.ts"

服务器组件中任何未通过 import { cache } from 'react' 包装的开销大调用，都会在每次页面加载时运行。

6. 报告

说明：

  • 根本原因（循环、文件监视、未缓存的读取、打包内容）
  • 修改的文件及修改内容
  • 修复后的预期行为（空闲时的 CPU 占用、热重载时间）

评论

支持 Markdown