Code Splitting코드 분할

분할 방식:
  1. 라우트 기반 분할: 각 페이지별 청크
  2. 컴포넌트 기반 분할: 지연 로드 컴포넌트
  3. 벤더 분할: 외부 라이브러리 분리
  4. 기능 기반 분할: 특정 기능 모듈 분리

// 정적 임포트 (번들에 포함)
import { heavyFunction } from './heavy';

// 동적 임포트 (별도 청크로 분리)
const { heavyFunction } = await import('./heavy');

// 조건부 로딩
async function loadFeature() {
  if (userHasPremium) {
    const { PremiumFeature } = await import('./PremiumFeature');
    return new PremiumFeature();
  }
}

// 힌트 제공 (webpack magic comments)
const module = await import(
  /* webpackChunkName: "premium" */
  /* webpackPrefetch: true */
  './PremiumFeature'
);

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 벤더 청크 수동 분리
        manualChunks: {
          'vendor-react': ['react', 'react-dom'],
          'vendor-ui': ['@radix-ui/react-dialog', '@radix-ui/react-tooltip'],
          'vendor-charts': ['recharts', 'd3'],
        },
      },
    },
    // 청크 크기 경고 임계값
    chunkSizeWarningLimit: 500,
  },
});

# webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer
npx webpack --profile --json > stats.json
npx webpack-bundle-analyzer stats.json

# Vite
npm install --save-dev rollup-plugin-visualizer

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    visualizer({ open: true, gzipSize: true }),
  ],
});

// 사용자가 곧 방문할 것으로 예상되는 라우트 프리패치
const nextPage = await import(
  /* webpackPrefetch: true */
  './NextPage'
);

// 즉시 필요한 리소스 프리로드
const criticalChunk = await import(
  /* webpackPreload: true */
  './CriticalModule'
);