코드 분할 적용 위치와 로딩 시점

초기 경로 분석

첫 화면에 꼭 필요한 컴포넌트와 나중에 필요한 컴포넌트를 분리한다.

critical path

bundle analyzer로 chart, editor, date library처럼 큰 청크를 확인한다.

chunk cost

next/dynamic 또는 dynamic import로 사용자 행동 뒤에 필요한 코드를 늦춘다.

지연 로딩 경계

skeleton, fallback, preload 전략으로 지연 로딩이 갑작스럽지 않게 만든다.

perceived speed

Route

페이지 단위 분할은 기본 제공되지만 공유 Client Component가 커질 수 있다. layout에 무거운 클라이언트 코드를 올리면 모든 하위 경로가 비용을 낸다.

shared cost

Widget

차트, 지도, 에디터는 보이는 순간에 로딩해도 되는지 판단한다. SEO가 필요한 본문은 클라이언트 전용 lazy 대상에서 제외한다.

visibility

Prefetch

자주 가는 다음 경로는 prefetch로 체감 지연을 줄인다. 낮은 확률의 무거운 경로까지 미리 받으면 초기 비용이 커진다.

probability

초기 JS 분할 뒤 first load JS가 실제로 줄었는지 확인한다.

로딩 상태 fallback이 레이아웃을 흔들지 않고 의미 있는 상태를 보여준다.

오류 경계 동적 로딩 실패 시 오류 경계나 재시도 경로가 있다.

const Chart = dynamic(() => import("./Chart"), {
  loading: () => <ChartSkeleton />
})