用途:审计并优化 Next.js 应用性能,属于特定技术栈的参考技能,覆盖渲染策略决策、图片与字体优化、路由段缓存和打包分析。
主要能力与流程:
- 读取项目设置,查看架构文档,确认 Next.js 版本(App Router 与 Pages Router 影响整体优化思路)、部署目标和数据获取模式。
- 确定范围,解析参数中的页面或路由;未指定时扫描 app/ 或 pages/,找出流量最高或最复杂的路由。
- 审计渲染策略,逐路由套用决策树:内容不随部署变化用静态生成(generateStaticParams / getStaticProps);周期性变化用增量静态再生成(ISR,配合 revalidate);个性化或每次请求变化用服务端渲染,并用 loading.tsx 或 Suspense 实现流式输出;依赖仅客户端 API 的内容用 "use client",且边界尽量下沉。
- 审计缓存配置:检查路由段配置(export const dynamic、export const revalidate)、fetch 的缓存与再验证选项、昂贵服务端计算是否缺少 cache() 或 unstable_cache()、布局中是否存在可独立缓存的过度获取。
- 审计图片优化:是否使用 next/image、是否缺少 width/height 或 sizes 导致布局偏移、大图是否未转换格式(WebP/AVIF)、首屏图片是否缺少 priority。
- 审计字体优化:是否使用 next/font、是否可用可变字体、是否从外部 CDN 加载而非自托管。
- 审计打包体积:使用 @next/bundle-analyzer、检查仅服务端代码是否泄漏到客户端、桶文件导入、第三方脚本是否用 next/script 及合适策略。
- 输出审计报告,含文件引用、现状、建议修复与预期影响,分为渲染策略评估、缓存配置审查、图片/字体发现、打包分析和优先级建议。
限制与反模式:避免默认全动态渲染、忽略流式输出、在布局层放置客户端组件、在不理解原因时禁用缓存、为省事跳过 next/image。具体版本要求、性能数字和兼容范围资料暂未提供。