用途:当用户提出优化 Next.js 应用、排查页面慢、减小打包体积、改善 Core Web Vitals 等需求时使用,用于诊断并修复 Next.js 应用的前端性能问题。
主要能力:提供基于 Lighthouse 的性能诊断流程,包括运行无头性能审计、解析关键指标(FCP、LCP、TBT、CLS)以及定位慢脚本和主线程耗时;提供打包体积分析(@next/bundle-analyzer);并给出常见修复方向。
使用方式:运行 Lighthouse 命令,如 npx lighthouse http://localhost:3000 --output=json --output-path=./lighthouse.json --chrome-flags="--headless" --only-categories=performance;随后用 jq 解析指标、慢脚本和主线程分解。打包分析需安装 bun add -d @next/bundle-analyzer,并以 ANALYZE=true bun run build 运行。
常见修复:配置 experimental.optimizePackageImports(如 framer-motion、lucide-react、lodash 等)以正确 tree-shaking;Framer Motion 使用 variants + staggerChildren 的单一控制器模式;避免动画中的 filter: blur() 和过多无限动画;将高亮、Markdown 解析、日期格式化、大数据转换等重计算移到服务端;使用 next/image 并给 LCP 图片加 priority、placeholder="blur";使用 next/font 并设置 display: 'swap'、preload: true;用 serverExternalPackages 排除仅服务端包。
性能目标:LCP 良好 ≤2.5s、FCP 良好 ≤1.8s、TBT 良好 ≤200ms、CLS 良好 ≤0.1。
限制:资料要求始终在生产构建(next build && next start)下测试,而非 dev 模式;关于具体版本兼容性、其他框架支持范围暂未提供。