Translation Comparison - performance-expert

Optimizing React components or Next.js pages
Improving API response times
Optimizing database queries
Analyzing bundle sizes
Implementing caching strategies
Optimizing images or assets
Configuring CDN or caching
Reviewing Core Web Vitals

优化React组件或Next.js页面
提升API响应时间
优化数据库查询
分析包体积
实施缓存策略
优化图片或资源
配置CDN或缓存
审查Core Web Vitals指标

Project Context Discovery

项目上下文探索

Check
```
.agents/SYSTEM/ARCHITECTURE.md
```
for performance architecture
Identify performance tools (Lighthouse CI, APM)
Review existing optimizations and caching strategies
Check for
```
[project]-performance-expert
```
skill

查看
```
.agents/SYSTEM/ARCHITECTURE.md
```
了解性能架构
识别性能工具（Lighthouse CI、APM）
回顾现有优化措施和缓存策略
检查是否存在
```
[project]-performance-expert
```
技能

Core Performance Principles

核心性能优化原则

Frontend (React/Next.js)

前端（React/Next.js）

Bundle Optimization: Code splitting, dynamic imports, tree shaking, remove unused deps

React Optimization: useMemo, useCallback, React.memo, virtualization, lazy loading

Next.js: Server Components, SSG, ISR, next/image, font optimization

Assets: WebP images, font subset, CSS minify, Gzip/Brotli

包体积优化： 代码分割、动态导入、Tree Shaking、移除未使用依赖

React优化： useMemo、useCallback、React.memo、虚拟化、懒加载

Next.js： Server Components、SSG、ISR、next/image、字体优化

资源优化： WebP图片、字体子集化、CSS压缩、Gzip/Brotli压缩

Backend (NestJS)

后端（NestJS）

API Response Times: Target < 200ms (p95), caching, background jobs, connection pooling

Query Optimization: Indexes, projections, pagination, optimized aggregations

API响应时间： 目标p95延迟<200ms，缓存、后台任务、连接池

查询优化： 索引、投影、分页、优化聚合操作

Database (MongoDB)

数据库（MongoDB）

Indexes: On frequently queried fields, compound indexes, monitor usage

Queries: Early $match, projection before expensive ops, sort with indexes

索引： 为频繁查询的字段创建索引、复合索引、监控索引使用情况

查询： 提前使用$match、在昂贵操作前进行投影、结合索引排序

Infrastructure (AWS)

基础设施（AWS）

CDN: CloudFront caching, cache headers, edge optimization

Lambda: Cold start optimization, memory allocation, provisioned concurrency

CDN： CloudFront缓存、缓存头、边缘优化

Lambda： 冷启动优化、内存分配、预置并发

Performance Metrics

性能指标

Frontend (Core Web Vitals)

前端（Core Web Vitals）

LCP: < 2.5s
FID: < 100ms
CLS: < 0.1
FCP: < 1.8s

LCP： <2.5秒
FID： <100毫秒
CLS： <0.1
FCP： <1.8秒

API p50: < 100ms
API p95: < 200ms
DB Query p95: < 50ms
Error Rate: < 0.1%

API p50： <100毫秒
API p95： <200毫秒
数据库查询p95： <50毫秒
错误率： <0.1%

Quick Checklist

快速检查清单

Bundle size < 200KB initial
Code splitting implemented
Images optimized and lazy loaded
React components memoized

初始包体积<200KB
已实现代码分割
图片已优化并启用懒加载
React组件已使用memo优化

Database queries optimized
Indexes created and used
Caching implemented
Background jobs for heavy operations

For complete React memoization patterns, Next.js optimization examples, database query optimization code, caching strategy implementation, N+1 query solutions, performance testing commands, and detailed checklists, see:

references/full-guide.md

数据库查询已优化
已创建并使用索引
已实施缓存
重操作已使用后台任务

如需完整的React memoization模式、Next.js优化示例、数据库查询优化代码、缓存策略实现、N+1查询解决方案、性能测试命令及详细检查清单，请查看：

references/full-guide.md

performance-expert

Original

Translation

Performance Expert Skill

性能优化专家技能

When to Use This Skill

何时使用该技能