Claude Code के साथ Practice Performance Optimization कैसे करें

performanceoptimizationको Claude Code से実践する

Webapplicationのperformance問題は原因の特定が難しく、改善に専門知識がज़रूरी है।Claude Codeはcodeの分析 से具体的な改善提案・implementation तक一貫してsupportでき है।

フロントエンドのoptimization

bundlesizeの分析と削減

> bundlesizeを分析して、大きなpackageを特定して。
> 不要なインポートのDeleteとtree-shakingのoptimizationを行って。

// Before fix：library全体をインポート
import _ from "lodash";
const result = _.groupBy(data, "category");

// After fix：ज़रूरीなfunctionのみインポート
import groupBy from "lodash/groupBy";
const result = groupBy(data, "category");

React再レンダリングのoptimization

> इसcomponentの不要な再レンダリングを特定して修正して。

// Before fix：毎回नयाオブジェクトがgenerateされる
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} />;
}

画像のoptimization

> 画像の読み込みをoptimizationして。
> Next.jsのImagecomponent、lazy loading、
> appropriateなsize指定を適用して。

import Image from "next/image";

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

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

バックエンドのoptimization

N+1queryの解消

> databasequeryを分析して、N+1問題を修正して。

// Before fix：N+1query
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 } },
  },
});

cache戦略のimplementation

> Redis を使ったcache層をadd करो。
> 頻繁にアクセスされるendpointに適用。

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分cache
  );
  res.json({ data: posts });
});

アルゴリズムの改善

> इसfunctionの計算量を分析して、改善して。

// 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）を改善するके लिए
> ज़रूरीな修正を洗い出して実行して。

debug的な分析手法はdebugテクニックcomplete guideを、React固有のoptimizationはReactdevelopmentを爆速にする方法もदेखें。

CLAUDE.mdにperformanceruleをsettings

## performancerule
- N+1queryを書かない（include use करना）
- lodash全体インポート禁止（個別インポートのみ）
- 画像はnext/imageを使用
- APIresponseにはcacheheaderをsettings

生産性をऊपरげる全般的なTipsは生産性を3倍にする10のTipsもあわせてदेखें。

Summary

Claude Codeはperformance問題の分析 से具体的な改善implementation तकsupportでき है।フロントエンドのbundlesize削減、バックエンドのqueryoptimization、cache戦略のimplementation आदि、多角的なアプローチでfast化を実現 करें।

performance計測के details के लिएweb.dev、Claude Codeके बारे मेंはAnthropicofficial documentationをदेखें。