performance-review
Analyze React/Next.js performance issues, N+1 queries, bundle size, and Core Web Vitals. Use when optimizing components, checking for slow renders, reviewing data fetching patterns, or when the app feels sluggish.
安装与使用
请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求,再添加到工作流。
查看来源 ↗使用指南技能说明
Performance Review
Analyze code for performance issues targeting Core Web Vitals (LCP < 2.5s, FID < 100ms, CLS < 0.1).
Scope
Review the specified files or components for:
1. React/Next.js Performance
- Unnecessary client components (should be server components)
- Missing
React.memo(),useMemo(),useCallback()where beneficial - Large component re-renders (check dependency arrays)
- Missing Suspense boundaries for async components
- Heavy components that should use
next/dynamic - Improper use of
use clientdirective
2. Data Fetching
- N+1 query patterns in Drizzle queries
- Missing
Promise.all()for parallel fetches - Overfetching data (selecting unused columns)
- Missing React
cache()for request deduplication - Unnecessary waterfalls in data loading
- Missing or improper TanStack Query configuration
3. Bundle Size
- Large dependencies imported synchronously
- Missing code splitting opportunities
- Importing entire libraries vs. specific modules
- Dead code that should be removed
4. Database Performance
- Missing indexes on filtered/joined columns
- Inefficient query patterns
- Large result sets without pagination
- Missing connection pooling considerations
5. Rendering Performance
- Layout thrashing (reading then writing DOM)
- Missing virtualization for long lists (TanStack Virtual)
- Large images without optimization
- Missing
loading="lazy"on images - CSS that causes reflows
6. Caching
- Missing cache headers on API routes
- Opportunities for static generation
- Missing revalidation strategies
- Inefficient cache invalidation
Output Format
For each finding:
[IMPACT: HIGH|MEDIUM|LOW]
File: path/to/file.ts:lineNumber
Issue: Brief description
Current: What's happening now
Recommended: How to optimize
Estimated Impact: Expected improvement
Actions
- Analyze component render patterns
- Review Drizzle queries for N+1 patterns
- Check for proper server/client component split
- Identify parallelization opportunities
- Review image and asset loading
Post-Review
Generate a summary with:
- Quick wins (low effort, high impact)
- Medium-term optimizations
- Architectural improvements for long-term
使用示例
查看来源仓库中的使用示例与配置说明。
查看来源 ↗来源历史
- 收录时间
- 2026-01-20
- 索引更新时间
- 2026-01-26
- Branch
- main
收录与同步日期属于本站记录。源码修改历史请查看来源仓库。
GitHub ↗chat Comments (0)
Sign in to join the discussion and leave a comment.
No comments yet. Be the first to share your thoughts!