$ loading_
帮助你在编写、审查或重构 React/Next.js 代码时系统优化性能。
复制安装指令，让 AI 自动完成配置 · 推荐新手
请帮我安装 askskill 上的 "react-performance" 技能： 1. 下载 https://raw.githubusercontent.com/affaan-m/ECC/main/skills/react-performance/SKILL.md 2. 保存为 ~/.claude/skills/react-performance/SKILL.md 3. 装好后重载技能，告诉我可以用了
请审查这段 Next.js 页面代码的性能问题，按优先级指出可能的请求瀑布、包体积过大、服务端与客户端数据获取不合理等问题，并给出优化建议和修改示例。
一份按优先级排序的性能问题清单，附带原因解释、优化方案和示例代码。
这段 React 组件存在明显卡顿，请分析导致频繁重渲染的原因，并基于性能最佳实践重构代码，说明每项修改的收益与适用条件。
重渲染原因分析、优化后的组件代码，以及每项性能改动的说明。
请为 React/Next.js 项目整理一份性能优化检查清单，覆盖请求瀑布、渲染策略、客户端获取、包体积、微观 JS 性能和进阶优化，并按排查优先级组织。
一份结构化的性能检查清单，可用于代码评审、开发规范或重构计划。
Performance optimization patterns for React 18/19 and Next.js, adapted from Vercel Labs react-best-practices (MIT, v1.0.0). This skill organizes rules by priority and provides decision-tree guidance for active code review and refactoring.
app/, pages/, components/, or data layers| Priority | Category | Prefix | When it matters |
|---|---|---|---|
| 1 — CRITICAL |
| Eliminating Waterfalls |
async- |
Anytime await is followed by independent await |
| 2 — CRITICAL | Bundle Size Optimization | bundle- | First-load JS, route-level imports, third-party libs |
| 3 — HIGH | Server-Side Performance | server- | RSC, Server Actions, API routes, SSR |
| 4 — MEDIUM-HIGH | Client-Side Data Fetching | client- | SWR / TanStack Query / raw fetch in hooks |
| 5 — MEDIUM | Re-render Optimization | rerender- | High-frequency state updates, parent-child fan-out |
| 6 — MEDIUM | Rendering Performance | rendering- | Long lists, animations, hydration |
| 7 — LOW-MEDIUM | JavaScript Performance | js- | Hot loops, frequent allocations |
| 8 — LOW | Advanced Patterns | advanced- | Effect-event integration, stable refs |
"Waterfalls are the #1 performance killer" — every sequential
awaitadds full network latency.
Check sync conditions (props, env, hardcoded flags) before awaiting remote data.
// INCORRECT
async function Page({ id }: { id: string }) {
const flag = await getFlag("show-page");
if (!flag || !id) return null;
const data = await getData(id);
// ...
}
// CORRECT — short-circuit on cheap sync condition first
async function Page({ id }: { id: string }) {
if (!id) return null;
const flag = await getFlag("show-page");
if (!flag) return null;
const data = await getData(id);
}
Move await into the branch that uses it.
// INCORRECT — awaits before deciding it needs the data
const user = await getUser(id);
if (mode === "guest") return renderGuest();
return renderUser(user);
// CORRECT
if (mode === "guest") return renderGuest();
const user = await getUser(id);
return renderUser(user);
// INCORRECT — sequential
const user = await getUser(id);
const posts = await getPosts(id);
const followers = await getFollowers(id);
// CORRECT — parallel
const [user, posts, followers] = await Promise.all([
getUser(id),
getPosts(id),
getFollowers(id),
]);
// CORRECT — kick off all promises, await only when each result is needed
const userP = getUser(id);
const postsP = getPosts(id);
const profile = await getProfile(id);
if (profile.private) return null;
const [user, posts] = await Promise.all([userP, postsP]);
Push <Suspense> boundaries close to the data so the page paints what it can while slower sub-trees stream in. The trade-off: layout shift when content arrives — reserve space (skeleton or min-height).
// INCORRECT — sibling awaits run sequentially inside one component
export default async function Page() {
const user = await getUser();
const cart = await getCart();
return <View user={user} cart={cart} />;
}
// CORRECT — split into children, React runs them in parallel
export default async function Page() {
return (
<View>
…
通过双评审智能体对结果进行对抗式校验，提升输出发布前的可靠性
帮助你梳理 React 与 Next.js 前端模式、状态管理和性能优化实践