# vite-bundle-visualizer 설치
pnpm add -D rollup-plugin-visualizer

# vite.config.ts
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    visualizer({
      open: true,
      filename: "stats.html",
    }),
  ],
});

# 빌드 후 stats.html 확인
pnpm build

# 패키지 크기 확인
npx vite-bundle-analyzer

import { lazy, Suspense } from "react";

// ❌ 정적 import (모든 페이지가 초기 번들에 포함)
import HomePage from "./pages/home";
import DashboardPage from "./pages/dashboard";

// ✅ 동적 import (필요할 때 로드)
const HomePage = lazy(() => import("./pages/home"));
const DashboardPage = lazy(() => import("./pages/dashboard"));

function Routes() {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/dashboard" element={<DashboardPage />} />
      </Routes>
    </Suspense>
  );
}

// 무거운 컴포넌트 지연 로드
const HeavyChart = lazy(() => import("./components/HeavyChart"));
const MapViewer = lazy(() => import("@pf-dev/map").then(m => ({ default: m.MapViewer })));

function Dashboard() {
  return (
    <div>
      <Suspense fallback={<ChartSkeleton />}>
        <HeavyChart data={data} />
      </Suspense>
    </div>
  );
}

// ❌ 전체 패키지 import (tree-shaking 불가능할 수 있음)
import { Button, Input, Select, Dialog } from "@pf-dev/ui";

// ✅ 직접 import (확실한 tree-shaking)
import { Button } from "@pf-dev/ui/atoms/Button";
import { Input } from "@pf-dev/ui/atoms/Input";

// ❌ 전체 lodash
import _ from "lodash";
_.debounce(fn, 300);

// ✅ 개별 함수만
import debounce from "lodash-es/debounce";
debounce(fn, 300);

// React DevTools Profiler로 확인
// Components > Profiler > 녹화

// 1. Selector로 Zustand 구독 최적화
const user = useAuthStore(state => state.user);  // ✅ user만 구독
const { user, settings } = useAuthStore();       // ❌ 전체 구독

// 2. 객체/배열 props 메모이제이션 (필요시)
const columns = useMemo(() => [
  { key: "name", label: "이름" },
  { key: "email", label: "이메일" },
], []);

// 3. 콜백 메모이제이션 (필요시)
const handleClick = useCallback((id) => {
  deleteItem(id);
}, [deleteItem]);

import { useVirtualizer } from "@tanstack/react-virtual";

function VirtualList({ items }: { items: Item[] }) {
  const parentRef = useRef<HTMLDivElement>(null);

  const virtualizer = useVirtualizer({
    count: items.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50,  // 예상 아이템 높이
  });

  return (
    <div ref={parentRef} className="h-[400px] overflow-auto">
      <div
        style={{
          height: `${virtualizer.getTotalSize()}px`,
          position: "relative",
        }}
      >
        {virtualizer.getVirtualItems().map((virtualItem) => (
          <div
            key={virtualItem.key}
            style={{
              position: "absolute",
              top: 0,
              left: 0,
              width: "100%",
              height: `${virtualItem.size}px`,
              transform: `translateY(${virtualItem.start}px)`,
            }}
          >
            <ItemRow item={items[virtualItem.index]} />
          </div>
        ))}
      </div>
    </div>
  );
}

// 1. lazy loading
<img src="/image.jpg" loading="lazy" alt="..." />

// 2. 적절한 크기
<img
  src="/image.jpg"
  srcSet="/image-400.jpg 400w, /image-800.jpg 800w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="..."
/>

// 3. WebP 포맷
<picture>
  <source srcSet="/image.webp" type="image/webp" />
  <img src="/image.jpg" alt="..." />
</picture>

// ❌ 순차 요청
const users = await fetchUsers();
const posts = await fetchPosts();
const comments = await fetchComments();

// ✅ 병렬 요청
const [users, posts, comments] = await Promise.all([
  fetchUsers(),
  fetchPosts(),
  fetchComments(),
]);

// React Query / SWR 사용
const { data } = useQuery({
  queryKey: ["users"],
  queryFn: fetchUsers,
  staleTime: 5 * 60 * 1000,  // 5분간 캐시
});

# CLI로 실행
npx lighthouse http://localhost:3000 --view

import { onCLS, onFID, onLCP, onFCP, onTTFB } from "web-vitals";

onCLS(console.log);   // Cumulative Layout Shift
onFID(console.log);   // First Input Delay
onLCP(console.log);   // Largest Contentful Paint
onFCP(console.log);   // First Contentful Paint
onTTFB(console.log);  // Time to First Byte

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ["react", "react-dom"],
          cesium: ["cesium"],
          three: ["three", "@react-three/fiber"],
        },
      },
    },
    chunkSizeWarningLimit: 500,  // KB
  },
});

import viteCompression from "vite-plugin-compression";

export default defineConfig({
  plugins: [
    viteCompression({
      algorithm: "gzip",
    }),
    viteCompression({
      algorithm: "brotliCompress",
    }),
  ],
});