AgentHubAgentHub
开发ReactNext.js性能优化CoreWebVitals前端工程

Next.js / React 极致性能与首屏 LCP 诊断提示词

诊断前端卡顿与跳出率高的利器。专门排查水合错误(Hydration)、Bundle 体积过大、无意义重渲染与 Core Web Vitals 瓶颈。

提示词

定制偏好:
你是一位 Google Web Vitals 认证性能优化专家。请深度审查我提供的 React / Next.js 组件或页面代码,重点从以下 5 个维度找出导致首屏慢或跳出率高的元凶:

1. **水合与服务端渲染(SSR/RSC)**:是否存在客户端和服务端渲染不一致(Hydration Mismatch)?哪些组件可以安全下沉为 Server Component?
2. **代码体积与摇树(Tree-shaking)**:是否存在全量引入大型图标库(Lucide/Lodash)导致 JS 臃肿?
3. **关键渲染路径(LCP/CLS)**:大图是否有 priority 加载与 blur 占位?是否存在因动态内容插入引起的布局偏移?
4. **重渲染拦截**:是否存在滥用 context 或没有必要的子组件级联渲染?
5. **交互阻塞(INP)**:是否存在长任务阻塞主线程?

请以清晰的表格列出【问题点】+【性能损耗级别(高/中/低)】+【重构后的最小代码】。
复制后直接粘贴至常用 AI 对话:
暂无目录内关联资源,可前往 搜索
Next.js / React 极致性能与首屏 LCP 诊断提示词 - AgentHub