Nextjs Performance Analyzer — Nextjs 性能分析器

Next.js 性能分析器 分析 Next.js 应用程序的性能问题，包括路由效率、数据获取模式、包大小、图像优化、缓存策略和 Server/Client 组件使用情况。 在页面加载缓慢、构建体积大或准备生产环境时使用。 用法 “分析我的 Next.js 应用程序的性能问题” “检查我的包大小并优化它” “审计我的 Next.js 应用程序的数据获取模式” “查看 Server 组件的使用情况” 工作原理

• 项目发现

cat next.config.js 2>/dev/null || cat next.config.mjs 2>/dev/null || cat next.config.ts 2>/dev/null cat package.json | python3 -c “导入 json、sys；d = json.load(sys.stdin)；打印（‘Next.js：’，d.get（‘dependencies’，{}）。get（‘next’，‘未找到’））” ls app/ pages/ 2>/dev/null find app/ -name “page.tsx” -o -name “page.js” 2>/dev/null | head -20 2>/dev/null

• 路由和数据获取

应用程序路由器分析：Server 与 Client 组件的比例 ‘use client’ 指令 —— 是否在树中过高？ 动态与静态路由 generateStaticParams 的正确使用 loading.tsx 和 error.tsx 是否存在于每个路由段 带有 Suspense 边界的流媒体 路由组用于布局组织 数据获取： fetch() 调用：是否使用缓存选项？（force-cache、no-store、revalidate） 服务器操作：正确的表单处理、错误边界 客户端获取：SWR/React Query 是否使用正确的缓存？ N+1 瀑布：可以并行的顺序获取 过度获取：加载比显示更多的数据

• 包分析

# 构建和检查输出 npx next build 2>&1 | tail -30 # 检查大型客户端包 find .next/static -name “*.js” -exec wc -c {} + | sort -rn | head -10 应该保留在服务器端的大型客户端依赖项 next/dynamic 对重组件的动态导入 树抖动的有效性 第三方脚本加载策略（next/script）

• 图像优化

所有图像是否使用 next/image 组件？ 是否设置了正确的宽度/高度或填充属性？ LCP（最大内容绘制）图像上的优先级标志 远程图像域是否在 next.config 中配置 WebP/AVIF 格式支持 下折页图像的延迟加载

• 缓存策略

ISR（增量静态再生）是否在适当的地方配置 数据缓存是否具有正确的重新验证间隔 静态页面的完整路由缓存 客户端导航的路由器缓存 静态资产的 CDN 缓存头

• 核心 Web 指标

估计对以下的影响： LCP：图像优化、字体加载、数据获取策略 FID/INP：客户端 JavaScript 量、水合成本 CLS：图像尺寸、动态内容、字体加载 输出

Next.js 性能分析

版本： Next.js 15.2 | 路由器： 应用程序路由器 页面： 34 | 客户端组件： 18/34（53%）

🔴 严重（3）

• ‘use client’ 在布局级别 —— app/dashboard/layout.tsx

使所有仪表板页面客户端渲染（12 页） → 将 ‘use client’ 移到单个交互式组件

• 没有图像优化 —— 23 个原始 标签

缺少 next/image = 没有自动 WebP、没有延迟加载、没有尺寸 → 用 ‘next/image’ 中的图像组件替换

• 瀑布式数据获取 —— app/dashboard/page.tsx

3 个顺序 await fetch() 调用（总计：~1.8 秒） → 使用 Promise.all() 进行并行获取

🟡 改进（5）

• 8 个路由段缺少 loading.tsx
• 大型包：chart.js（180KB）在每个页面加载

→ 动态导入

• /blog/[slug]（47 篇帖子，全部 SSR）缺少 generateStaticParams
• 从 Google Fonts CDN 加载字体

→ 使用 next/font 以实现零 CLS

• 英雄图像（LCP 候选项）缺少优先级属性

📊 包分析

| 路由 | 大小 | 首次加载 JS | 状态 | |-------|------|---------------|--------| | / | 89KB | 145KB | 🟢 OK | | /dashboard | 312KB | 368KB | 🔴 过大 | | /settings | 45KB | 101KB | 🟢 OK | | /blog/[slug] | 67KB | 123KB | 🟢 OK |

✅ 良好实践

• 数据密集型页面的服务器组件
• 具有回退的正确 Suspense 边界
• 用于身份验证检查的中间件（边缘优化）
• next.config.js 使用输出：‘独立’用于 Docker