# [[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*