ClaudeCodeLab
Advanced

如何Practice Performance Optimization：Claude Code 实战指南

学习如何practice performance optimization：Claude Code 实战. 包含实用代码示例和分步指导。

性能优化を通过 Claude Code 实践

Web应用の性能問題は原因の特定が難しく、改善に専門知識が是必要的。Claude Code コードの分析から具体的改善提案・实现まで一貫して支持可以。

前端の优化

打包サイズの分析と削減

> 打包サイズを分析して、大きな包を特定して。
> 不要な导入のDeleteとtree-shakingの优化を行って。
// Before fix：库全体を导入
import _ from "lodash";
const result = _.groupBy(data, "category");

// After fix：必要な函数のみ导入
import groupBy from "lodash/groupBy";
const result = groupBy(data, "category");

React再渲染の优化

> 这个组件の不要な再渲染を特定して修正して。
// Before fix：毎回新しい对象が生成される
function Dashboard({ userId }: { userId: string }) {
  const filters = { userId, status: "active" };
  const data = useQuery(["dashboard", filters], () => fetchDashboard(filters));

  return <DashboardView data={data} />;
}

// After fix：useMemoで参照を安定化
function Dashboard({ userId }: { userId: string }) {
  const filters = useMemo(
    () => ({ userId, status: "active" as const }),
    [userId]
  );
  const data = useQuery(["dashboard", filters], () => fetchDashboard(filters));

  return <DashboardView data={data} />;
}

图片の优化

> 图片の加载を优化して。
> Next.jsのImage组件、lazy loading、
> 合适的サイズ指定を適用して。
import Image from "next/image";

// Before fix
<img src="/hero.png" />

// After fix
<Image
  src="/hero.png"
  alt="ヒーローイメージ"
  width={1200}
  height={600}
  priority  // ファーストビューの图片はpriority
  sizes="(max-width: 768px) 100vw, 1200px"
/>

后端の优化

N+1查询の解消

> 数据库查询を分析して、N+1問題を修正して。
// Before fix：N+1查询
const posts = await prisma.post.findMany();
for (const post of posts) {
  post.author = await prisma.user.findUnique({
    where: { id: post.authorId },
  });
  post.comments = await prisma.comment.findMany({
    where: { postId: post.id },
  });
}

// After fix：eager loading
const posts = await prisma.post.findMany({
  include: {
    author: { select: { id: true, name: true, avatar: true } },
    comments: {
      take: 5,
      orderBy: { createdAt: "desc" },
    },
    _count: { select: { comments: true } },
  },
});

缓存戦略の实现

> Redis 使用...的缓存層添加。
> 頻繁にアクセスされる端点に適用。
import Redis from "ioredis";

const redis = new Redis(process.env.REDIS_URL);

async function getCachedData<T>(
  key: string,
  fetcher: () => Promise<T>,
  ttlSeconds = 300
): Promise<T> {
  const cached = await redis.get(key);
  if (cached) {
    return JSON.parse(cached);
  }

  const data = await fetcher();
  await redis.set(key, JSON.stringify(data), "EX", ttlSeconds);
  return data;
}

// Usage example
app.get("/api/popular-posts", async (req, res) => {
  const posts = await getCachedData(
    "popular-posts",
    () => prisma.post.findMany({
      orderBy: { viewCount: "desc" },
      take: 20,
    }),
    600 // 10分缓存
  );
  res.json({ data: posts });
});

アルゴリズムの改善

> 这个函数の計算量を分析して、改善して。
// Before fix：O(n^2)
function findCommonElements(arr1: number[], arr2: number[]): number[] {
  return arr1.filter(item => arr2.includes(item));
}

// After fix：O(n + m)
function findCommonElements(arr1: number[], arr2: number[]): number[] {
  const set2 = new Set(arr2);
  return arr1.filter(item => set2.has(item));
}

Core Web Vitalsの改善

> Core Web Vitals（LCP, FID, CLS）を改善する为了
> 必要な修正を洗い出して実行して。

调试的な分析手法は调试テクニック完全指南を、React固有の优化はReact开发を爆速にする方法也请参阅。

CLAUDE.mdに性能ルールを配置

## パフォーマンスルール
- N+1クエリを書かない（includeを使う）
- lodash全体インポート禁止（個別インポートのみ）
- 画像はnext/imageを使用
- APIレスポンスにはキャッシュヘッダーを設定

生産性を上げる全般的なTipsは生産性を3倍にする10のTips也请一并查看。

总结

Claude Code 性能問題の分析から具体的改善实现まで支持可以。前端の打包サイズ削減、后端の查询优化、缓存戦略の实现など、多角的なアプローチで高速化を実現吧。

性能計測的详细信息请参阅web.dev、让 Claude CodeついてはAnthropic官方文档。

#Claude Code #performance #optimization #Core Web Vitals #高速化

Related Posts