코드 분할과 지연 로딩 기준

lazy loading은 기능을 숨기는 기법이 아니라 사용자가 아직 보지 않은 클라이언트 코드를 별도 청크로 늦게 받게 만드는 경계 설계다.

코드 분할과 지연 로딩lazy loading은 기능을 숨기는 기법이 아니라 사용자가 아직 보지 않은 클라이언트 코드를 별도 청크로 늦게 받게 만드는 경계 설계다.
1

초기 번들

헤더, 레이아웃, 첫 화면 텍스트처럼 즉시 보여야 하는 코드만 먼저 보낸다. · page shell

2

지연 경계

차트, 에디터, 지도처럼 무거운 컴포넌트 앞에 청크 경계를 둔다. · dynamic(() => import(...))

3

나중 청크

사용자가 열거나 스크롤한 순간 필요한 코드만 추가로 내려받는다. · chart.chunk.js

4

화면 합류

loading 또는 Suspense fallback이 실제 기능으로 교체된다.

Server Component

데이터 조합과 정적 설명

상호작용이 없다면 클라이언트 번들에 넣지 않는다.

핵심코드 분할과 지연 로딩 기준은 각 요소의 관계와 선택 조건을 함께 읽어야 한다.