성능 최적화: 번들 분석 + 코드 스플리팅 + Suspense

pnpm add -D @next/bundle-analyzer

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // ... 기존 설정
});

ANALYZE=true pnpm build
# → /analyze/client.html 자동 열림
# → 큰 chunk 식별 (lodash, moment, chart.js 등)

// 무거운 컴포넌트 — 필요할 때만 로드
import dynamic from 'next/dynamic';

const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
  loading: () => <p>차트 로딩 중...</p>,
  ssr: false,  // 클라이언트만 (브라우저 API 의존)
});

const RichEditor = dynamic(
  () => import('@tiptap/react').then(mod => mod.EditorContent),
  { ssr: false }
);

export default function Page() {
  const [showChart, setShowChart] = useState(false);
  return (
    <>
      <button onClick={() => setShowChart(true)}>차트 보기</button>
      {showChart && <HeavyChart />}
    </>
  );
}

// app/dashboard/page.tsx
import { Suspense } from 'react';

export default function Dashboard() {
  return (
    <div>
      <h1>대시보드</h1>

      {/* 빠른 데이터 — 즉시 렌더 */}
      <UserProfile />

      {/* 느린 데이터 — 스트리밍 */}
      <Suspense fallback={<RevenueSkeleton />}>
        <RevenueChart />
      </Suspense>

      <Suspense fallback={<ActivitySkeleton />}>
        <RecentActivity />
      </Suspense>
    </div>
  );
}


async function RevenueChart() {
  const data = await fetchRevenue();  // 3초 걸림
  return <Chart data={data} />;
}

async function RecentActivity() {
  const items = await fetchActivity();  // 1초 걸림
  return <Activity items={items} />;
}


// → 페이지가 즉시 응답 시작
// → 빠른 부분 먼저 렌더
// → 느린 부분은 준비되는 대로 스트리밍

app/posts/
├── layout.tsx
├── loading.tsx       # 자동 fallback
└── page.tsx

// app/posts/loading.tsx
export default function Loading() {
  return (
    <div className="skeleton-grid">
      {Array.from({ length: 6 }).map((_, i) => (
        <div key={i} className="skeleton-card" />
      ))}
    </div>
  );
}

// ❌ moment (290KB)
import moment from 'moment';

// ✅ date-fns (tree-shake, 수 KB)
import { format, parseISO } from 'date-fns';


// ❌ lodash 전체 (70KB)
import _ from 'lodash';

// ✅ named import (KB)
import debounce from 'lodash/debounce';


// ❌ chart.js (200KB+)
// ✅ recharts (60KB) 또는 자체 SVG

LCP (Largest Contentful Paint): < 2.5s
  → 히어로 이미지 priority + 폰트 preload

FID/INP (Interaction to Next Paint): < 200ms
  → 무거운 JS 분할 + Web Worker

CLS (Cumulative Layout Shift): < 0.1
  → 이미지 width/height + 폰트 size-adjust