번들 최적화 — Tree Shaking부터 Dynamic Import까지

npm install -D rollup-plugin-visualizer

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

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

npm install -D webpack-bundle-analyzer

// ES Modules — Tree Shaking 가능
import { format } from 'date-fns';
// format만 번들에 포함, 나머지는 제거

// CommonJS — Tree Shaking 불가
const { format } = require('date-fns');
// 전체 라이브러리가 번들에 포함될 수 있음

// 좋음 — 필요한 것만 import
import { Button, Input } from '@mui/material';

// 더 좋음 — 직접 경로에서 import
import Button from '@mui/material/Button';
import Input from '@mui/material/Input';

// 나쁨 — 전체 import
import * as MUI from '@mui/material';

// package.json
{
  "sideEffects": false
}

// CSS 파일은 부수효과가 있으므로 예외 처리
{
  "sideEffects": ["*.css", "*.scss"]
}

import { lazy, Suspense } from 'react';

// 별도 chunk로 분리됨
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
const Profile = lazy(() => import('./pages/Profile'));

function App() {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </Suspense>
  );
}

번들 분리 결과:
main.js          — 50KB (공통 코드, React, Router)
dashboard.chunk.js — 30KB (/dashboard 접근 시만 로드)
settings.chunk.js  — 20KB (/settings 접근 시만 로드)
profile.chunk.js   — 15KB (/profile 접근 시만 로드)

// 모달처럼 초기에 보이지 않는 컴포넌트
const HeavyChart = lazy(() => import('./components/HeavyChart'));

function Dashboard() {
  const [showChart, setShowChart] = useState(false);

  return (
    <div>
      <button onClick={() => setShowChart(true)}>차트 보기</button>
      {showChart && (
        <Suspense fallback={<ChartSkeleton />}>
          <HeavyChart />
        </Suspense>
      )}
    </div>
  );
}

const Settings = lazy(() => import('./pages/Settings'));

// 마우스를 올리면 미리 로드
function NavLink() {
  const preloadSettings = () => {
    import('./pages/Settings');
  };

  return (
    <Link
      to="/settings"
      onMouseEnter={preloadSettings}
      onFocus={preloadSettings}
    >
      설정
    </Link>
  );
}

// components/index.js (barrel file)
export { Button } from './Button';
export { Input } from './Input';
export { Modal } from './Modal';
export { Table } from './Table';
export { Chart } from './Chart'; // 큰 차트 라이브러리 의존

// 사용하는 곳
import { Button } from '@/components'; // Button만 쓰는데...
// 번들러에 따라 Chart(큰 라이브러리 포함)도 번들에 포함될 수 있음

// 직접 경로로 import
import { Button } from '@/components/Button';

// 또는 barrel에서 무거운 컴포넌트 분리
// components/index.js
export { Button } from './Button';
export { Input } from './Input';

// components/heavy.js — 별도 진입점
export { Chart } from './Chart';

// vite.config.js
export default {
  resolve: {
    // barrel import를 개별 파일로 리다이렉트
    alias: {
      '@/components': path.resolve(__dirname, 'src/components'),
    },
  },
};

// 나쁨 — 전체 lodash 포함
import { debounce } from 'lodash';

// 좋음 — 개별 함수만 import
import debounce from 'lodash/debounce';

// 또는 lodash-es 사용 (ES Modules, Tree Shakeable)
import { debounce } from 'lodash-es';

// 작은 이미지는 인라인 (base64)
// 큰 이미지는 별도 파일로 분리
// Vite는 기본적으로 4KB 이하 이미지를 인라인 처리

// 폰트 — subset으로 필요한 글리프만 포함
// woff2 형식 사용 (가장 작은 크기)