첫 화면 필요 여부
헤더, 핵심 CTA, 즉시 보이는 리스트처럼 렌더링을 완성하는 코드는 초기 청크에 남기는 편이 낫습니다.
분할 판단 기준
분할 대상은 “늦게 필요한 무거운 코드”입니다
코드 분할은 무조건 많이 나누는 작업이 아닙니다. 첫 화면, 번들 크기, 실행 시점을 함께 보고 분할 경계를 정합니다.
코드 분할 판별 순서
필수 화면성 -> 무게 -> 호출 시점 -> 로딩 UI
2
split
특정 화면 전용 사용 여부
차트, 지도, 에디터, 관리자 도구처럼 특정 라우트나 기능에만 필요한 코드는 별도 청크로 나눕니다.
3
lazy
사용자 행동 후 필요 여부
모달, 미리보기, 지도 열기처럼 클릭 후 필요한 컴포넌트는
next/dynamic과 로딩 UI를 함께 둡니다.
Route chunk
페이지와 라우트 그룹은 기본 분할을 활용합니다.
Dynamic import
클라이언트 전용 컴포넌트를 필요한 순간 불러옵니다.
Suspense
사용자가 기다리는 영역에는 fallback을 두어 느린 데이터 구간만
로딩 상태로 바꿉니다.
Measure
Lighthouse와 번들 분석기로 실제 감소량을 확인합니다.