01 · Concept

모듈 번들링과 최적화

번들러가 모듈을 하나로 합치고, 트리 쉐이킹과 코드 스플릿팅으로 최적화하는 과정을 학습합니다.

모던 웹 앱은 수백 개의 모듈로 구성됩니다. 번들러는 이를 최적화된 파일로 합치고, 트리 쉐이킹으로 미사용 코드를 제거하며, 코드 스플릿팅으로 필요한 코드만 로드합니다. ESM의 정적 분석 특성이 이러한 최적화를 가능하게 합니다.

02 · Interactive Demo

번들 사이즈 비교와 최적화

트리 쉐이킹, 코드 스플릿팅, ESM vs CJS의 번들 사이즈 차이를 확인하세요.

사용하지 않는 코드를 제거하여 번들 사이즈를 줄입니다.
Bundle Analysis
add()
2KB
subtract()
2KB
multiply()
3KB
divide()
3KB
pow()
4KB
sqrt()
2KB
최적화 전
16KB
최적화 후
—
03 · Code Example

코드 예시

실제 코드로 동작 원리를 확인하세요.

// React.lazy + Suspense로 코드 스플릿팅
import { lazy, Suspense } from 'react';

// 라우트 기반 코드 스플릿팅
const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));
const Analytics = lazy(() => import('./Analytics'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/analytics" element={<Analytics />} />
      </Routes>
    </Suspense>
  );
}

// Next.js dynamic import
import dynamic from 'next/dynamic';
const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <p>차트 로딩 중...</p>,
  ssr: false, // 클라이언트에서만 렌더링
});
04 · Interview Point

면접 핵심 질문

트리 쉐이킹은 번들러가 사용되지 않는 코드(dead code)를 제거하는 최적화 기법입니다. ES Modules의 import/export는 정적이므로 빌드 시점에 어떤 코드가 사용되는지 분석할 수 있습니다.sideEffects: false를 설정하면 번들러가 더 적극적으로 미사용 코드를 제거합니다.
  1. 라우트 기반 — React.lazy + Suspense로 페이지별 청크 분리
  2. 컴포넌트 기반 — dynamic import()로 무거운 컴포넌트를 지연 로딩
  3. 라이브러리 기반 — lodash 등 대형 라이브러리의 서브 모듈만 import
Next.js에서는 next/dynamic으로 SSR 여부까지 제어할 수 있습니다.
ESM(ES Modules)은 import/export를 사용하며,정적 분석이 가능하여 트리 쉐이킹에 유리합니다. 비동기 로딩을 지원합니다.

CJS(CommonJS)는 require/module.exports를 사용하며, 런타임에 동적으로 모듈을 로드합니다. 조건부 require가 가능하지만 트리 쉐이킹이 어렵습니다. Node.js의 기본 모듈 시스템이었으나 ESM으로 전환 중입니다.