2nd/00_Raw/Code Splitting and Lazy Loading.md

Code Splitting and Lazy Loading

📌 Brief Summary

**Code Splitting(코드 분할)**과 **Lazy Loading(지연 로딩)**은 방대한 자바스크립트 번들을 더 작은 청크(chunk) 단위로 나누고, 사용자가 필요로 하는 시점에만 온디맨드(on-demand) 방식으로 코드를 로드하는 프런트엔드 최적화 기법입니다[1-3]. 이 기법을 사용하면 초기 다운로드해야 하는 번들 크기를 크게 줄여 페이지 로드 시간과 사용자 인지 성능을 획기적으로 향상시킬 수 있습니다[1, 4]. React 환경에서는 주로 동적 임포트와 결합된 React.lazy() 및 <Suspense>를 활용해 구현됩니다[5, 6].

📖 Core Content

• 초기 번들 크기 문제와 해결책: 기본적으로 모던 프런트엔드 애플리케이션은 모든 앱 코드와 외부 종속성(dependencies)을 하나의 거대한 자바스크립트 파일(번들)로 패키징합니다. 이는 긴 다운로드 시간, 무거운 파싱 및 컴파일 작업, 그리고 Core Web Vitals(FCP, LCP, INP) 지표의 하락을 유발합니다[3, 7]. 코드 스플리팅은 이 거대한 번들을 분할하여, 애플리케이션 초기 구동에 불필요한 코드를 분리함으로써 이러한 성능 병목 현상을 해결합니다[3, 8].

• 스플리팅 및 지연 로딩의 적용 전략:

  • 라우트 기반 스플리팅(Route-level splitting): 사용자가 특정 페이지 경로(Route)로 네비게이션할 때만 해당 화면의 코드를 다운로드하게 하여 초기 로드 속도를 획기적으로 향상시키는 가장 일반적인 접근 방식입니다[2, 3, 9].
  • 컴포넌트 수준 지연 로딩(Component-level lazy loading): 차트, 지도, 리치 텍스트 에디터처럼 무겁거나, 모달 창 및 관리자 설정 패널처럼 사용 빈도가 낮은 UI 블록을 렌더링이 필요한 순간에만 로드합니다[5, 10].

• React에서의 구현 방법 (React.lazy와 Suspense): React는 내장 함수인 React.lazy()를 제공하여 컴포넌트를 동적으로 임포트(import())할 수 있도록 지원합니다[1, 5]. 이때 분할된 코드가 다운로드되는 동안 화면에 보여줄 로딩 스피너나 스켈레톤 UI와 같은 폴백(fallback) 화면은 <Suspense> 컴포넌트를 통해 정의합니다[6, 9]. 이러한 방식을 적용하면 앱 복잡도에 따라 초기 번들 크기를 최대 20~70%까지 줄일 수 있습니다[6].

• 이미지 지연 로딩 최적화: 자바스크립트뿐만 아니라 이미지 역시 페이지 용량의 큰 부분을 차지합니다. 스크롤 아래에 위치해 당장 보이지 않는 이미지의 경우, 자바스크립트를 복잡하게 구현할 필요 없이 브라우저 네이티브 속성인 loading="lazy"를 사용하여 불필요한 리소스 다운로드를 방지할 수 있습니다[11].

• 적용 시 주의사항 (안티 패턴): 지연 로딩은 강력하지만, 화면 최상단에 있어 스크롤 없이 즉시 보여야 하는 필수 영역(above-the-fold) 컴포넌트나, 렌더링 속도가 매우 빨라 즉각적으로 표시되어야 하는 요소들에는 적용을 피해야 합니다[10, 11]. 이들에 적용하면 오히려 사용자 경험(UX)을 지연시킬 수 있습니다.

🔗 Knowledge Connections

• Related Topics: React Performance Optimization, Core Web Vitals, Suspense
• Projects/Contexts: Vite, Next.js
• Contradictions/Notes: 지연 로딩은 초기 로딩 속도 향상을 위한 핵심 도구이지만, 화면 첫 렌더링에 핵심적인 부분(above-the-fold 요소 등)에 남용하면 반대로 렌더링 지연을 초래하므로 주의 깊게 측정하고 분리해야 합니다[10, 11].

---

Last updated: 2026-04-26