Static vs Dynamic Import (적재적소 분리)

#44PerformanceMedium

Static vs Dynamic Import (적재적소 분리)

Static vs Dynamic Import — 어떤 모듈을 어디에?

진짜 기술은 "언제 static import를 유지하고, 언제 dynamic으로 빼는지" 판단하는 것. 이 Dashboard 컴포넌트에는 두 종류의 의존성이 섞여 있습니다.

시나리오

Header — 모든 페이지에서 즉시 필요 — static import 유지
MetricsChart — 첫 화면에 즉시 보임 — static import 유지
PdfExporter — 무거운 PDF 라이브러리 (~500KB), "Export" 버튼 누른 사용자만 필요 — dynamic으로 분리해야 함

요구사항

Header, MetricsChart 는 정적(static) import 그대로 유지 — 페이지 마운트 시 즉시 평가됨
PdfExporter 는 React.lazy + Suspense 로 분리 — 초기 마운트 시 평가되지 않아야 함
"Export PDF" 버튼 클릭 시 PdfExporter 모듈이 로드되고 렌더
다시 닫고 열어도 PdfExporter 모듈은 한 번만 로드 (브라우저 캐시)

학습 포인트

static import는 나쁜 게 아님 — 항상 필요한 코드는 main bundle에 두는 게 정상
dynamic import는 자주 안 쓰이거나 무거운 모듈에만 적용 (모든 걸 lazy로 빼면 라우팅마다 waterfall)
적재적소 판단이 코드 분할의 진짜 기술

import { useState } from 'react';
import { Header } from './Header';            // static — 유지
import { MetricsChart } from './MetricsChart'; // static — 유지
import { PdfExporter } from './PdfExporter';   // TODO: 이것만 dynamic으로 분리

export function Dashboard() {
  const [showExporter, setShowExporter] = useState(false);

  return (
    <div>
      <Header />
      <MetricsChart />
      <button data-testid="export" onClick={() => setShowExporter(true)}>
        Export PDF
      </button>
      {/* TODO: PdfExporter 를 React.lazy + Suspense로 감싸 분리 */}
      {showExporter && <PdfExporter />}
    </div>
  );
}

Open Sandbox

Sandpack 로드 중…

import { useState } from 'react';
import { Header } from './Header';            // static — 유지
import { MetricsChart } from './MetricsChart'; // static — 유지
import { PdfExporter } from './PdfExporter';   // TODO: 이것만 dynamic으로 분리

export function Dashboard() {
  const [showExporter, setShowExporter] = useState(false);

  return (
    <div>
      <Header />
      <MetricsChart />
      <button data-testid="export" onClick={() => setShowExporter(true)}>
        Export PDF
      </button>
      {/* TODO: PdfExporter 를 React.lazy + Suspense로 감싸 분리 */}
      {showExporter && <PdfExporter />}
    </div>
  );
}

Open Sandbox