性能优化器¶

# バンドル分析
npx bundle-analyzer
npx source-map-explorer build/static/js/*.js

# Lighthouseパフォーマンス監査
npx lighthouse https://your-app.com --view

# Node.jsプロファイリング
node --prof your-app.js
node --prof-process isolate-*.log

# メモリ分析
node --inspect your-app.js  # Chrome DevToolsを使用

# Reactプロファイリング（ブラウザ内）
# React DevTools > Profilerタブ

# ネットワーク分析
npx webpack-bundle-analyzer

// BAD: O(n²) - ループ内で配列を検索
for (const user of users) {
  const posts = allPosts.filter(p => p.userId === user.id); // ユーザーごとに O(n)
}

// GOOD: O(n) - Mapで1回グルーピング
const postsByUser = new Map<number, Post[]>();
for (const post of allPosts) {
  const userPosts = postsByUser.get(post.userId) || [];
  userPosts.push(post);
  postsByUser.set(post.userId, userPosts);
}
// ユーザーごとの O(1) ルックアップ

// BAD: レンダリング時のインライン関数生成
<Button onClick={() => handleClick(id)}>Submit</Button>

// GOOD: useCallbackで安定したコールバック
const handleButtonClick = useCallback(() => handleClick(id), [handleClick, id]);
<Button onClick={handleButtonClick}>Submit</Button>

// BAD: レンダリング時のオブジェクト生成
<Child style={{ color: 'red' }} />

// GOOD: 安定したオブジェクト参照
const style = useMemo(() => ({ color: 'red' }), []);
<Child style={style} />

// BAD: 毎回のレンダリングでの高コスト計算
const sortedItems = items.sort((a, b) => a.name.localeCompare(b.name));

// GOOD: 高コスト計算のメモ化
const sortedItems = useMemo(
  () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
  [items]
);

// BAD: キーなしまたはindexをキーとするリスト
{items.map((item, index) => <Item key={index} />)}

// GOOD: 安定した一意のキー
{items.map(item => <Item key={item.id} item={item} />)}

# バンドル構成の分析
npx webpack-bundle-analyzer build/static/js/*.js

# 重複依存関係のチェック
npx duplicate-package-checker-analyzer

# 最大ファイルの検索
du -sh node_modules/* | sort -hr | head -20

// BAD: ライブラリ全体をインポート
import _ from 'lodash';
import moment from 'moment';

// GOOD: 必要なものだけインポート
import debounce from 'lodash/debounce';
import { format, addDays } from 'date-fns';

// またはlodash-esでツリーシェイキング
import { debounce, throttle } from 'lodash-es';

-- BAD: 全カラムを選択
SELECT * FROM users WHERE active = true;

-- GOOD: 必要なカラムのみ選択
SELECT id, name, email FROM users WHERE active = true;

-- BAD: N+1クエリ（アプリケーションループ内）
-- ユーザー用1クエリ、各ユーザーの注文用Nクエリ

-- GOOD: JOINまたはバッチフェッチによる単一クエリ
SELECT u.*, o.id as order_id, o.total
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
WHERE u.active = true;

-- 頻繁にクエリされるカラムにインデックスを追加
CREATE INDEX idx_users_active ON users(active);
CREATE INDEX idx_orders_user_id ON orders(user_id);

// BAD: 複数の逐次リクエスト
const user = await fetchUser(id);
const posts = await fetchPosts(user.id);
const comments = await fetchComments(posts[0].id);

// GOOD: 独立している場合は並列リクエスト
const [user, posts] = await Promise.all([
  fetchUser(id),
  fetchPosts(id)
]);

// GOOD: 可能な場合はバッチリクエスト
const results = await batchFetch(['user1', 'user2', 'user3']);

// リクエストキャッシュの実装
const fetchWithCache = async (url: string, ttl = 300000) => {
  const cached = cache.get(url);
  if (cached) return cached;

  const data = await fetch(url).then(r => r.json());
  cache.set(url, data, ttl);
  return data;
};

// 高頻度API呼び出しのデバウンス
const debouncedSearch = debounce(async (query: string) => {
  const results = await searchAPI(query);
  setResults(results);
}, 300);

// BAD: クリーンアップなしのイベントリスナー
useEffect(() => {
  window.addEventListener('resize', handleResize);
  // クリーンアップが欠如！
}, []);

// GOOD: イベントリスナーのクリーンアップ
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

// BAD: クリーンアップなしのタイマー
useEffect(() => {
  setInterval(() => pollData(), 1000);
  // クリーンアップが欠如！
}, []);

// GOOD: タイマーのクリーンアップ
useEffect(() => {
  const interval = setInterval(() => pollData(), 1000);
  return () => clearInterval(interval);
}, []);

// BAD: クロージャでの参照保持
const Component = () => {
  const largeData = useLargeData();
  useEffect(() => {
    eventEmitter.on('update', () => {
      console.log(largeData); // クロージャが参照を保持
    });
  }, [largeData]);
};

// GOOD: refまたは適切な依存関係を使用
const largeDataRef = useRef(largeData);
useEffect(() => {
  largeDataRef.current = largeData;
}, [largeData]);

useEffect(() => {
  const handleUpdate = () => {
    console.log(largeDataRef.current);
  };
  eventEmitter.on('update', handleUpdate);
  return () => eventEmitter.off('update', handleUpdate);
}, []);

# Chrome DevTools Memoryタブ:
# 1. ヒープスナップショットを取得
# 2. アクションを実行
# 3. 別のスナップショットを取得
# 4. 比較して存在すべきでないオブジェクトを見つける
# 5. デタッチされたDOMノード、イベントリスナー、クロージャを探す

# Node.jsメモリデバッグ
node --inspect app.js
# chrome://inspectを開く
# ヒープスナップショットを取得して比較

# 完全なlighthouse監査を実行
npx lighthouse https://your-app.com --view --preset=desktop

# 自動チェック用CIモード
npx lighthouse https://your-app.com --output=json --output-path=./lighthouse.json

# 特定のメトリクスをチェック
npx lighthouse https://your-app.com --only-categories=performance

// package.json
{
  "bundlesize": [
    {
      "path": "./build/static/js/*.js",
      "maxSize": "200 kB"
    }
  ]
}

// Track Core Web Vitals (web-vitals v4 API)
import { onCLS, onINP, onLCP, onFCP, onTTFB } from 'web-vitals';

onCLS(console.log);  // Cumulative Layout Shift
onINP(console.log);  // Interaction to Next Paint
onLCP(console.log);  // Largest Contentful Paint
onFCP(console.log);  // First Contentful Paint
onTTFB(console.log); // Time to First Byte

# パフォーマンス監査レポート

## エグゼクティブサマリー
- **総合スコア**: X/100
- **重大な問題**: X件
- **推奨事項**: X件

## バンドル分析
| メトリクス | 現在 | 目標 | ステータス |
|-----------|------|------|----------|
| 合計サイズ（gzip） | XXX KB | < 200 KB | WARNING: |
| メインバンドル | XXX KB | < 100 KB | PASS: |
| Vendorバンドル | XXX KB | < 150 KB | WARNING: |

## Web Vitals
| メトリクス | 現在 | 目標 | ステータス |
|-----------|------|------|----------|
| LCP | X.X秒 | < 2.5秒 | PASS: |
| INP | XXms | < 200ms | PASS: |
| CLS | X.XX | < 0.1 | WARNING: |

## 重大な問題

### 1. [問題タイトル]
**ファイル**: path/to/file.ts:42
**影響**: High - XXXmsの遅延を引き起こす
**修正**: [修正の説明]

```typescript
// Before（低速）
const slowCode = ...;

// After（最適化済み）
const fastCode = ...;
```

### 2. [問題タイトル]
...

## 推奨事項
1. [優先度の高い推奨事項]
2. [優先度の高い推奨事項]
3. [優先度の高い推奨事項]

## 推定影響
- バンドルサイズ削減: XX KB (XX%)
- LCP改善: XXms
- Time to Interactive改善: XXms