Antigravity Agent
22 lines
3.8 KiB
Markdown
22 lines
3.8 KiB
Markdown
# [[Code Splitting]]
|
|
|
|
## 📌 Brief Summary
|
|
코드 스플리팅(Code Splitting)은 자바스크립트 애플리케이션의 거대한 단일 번들을 더 작은 청크(chunk) 단위로 분할하여 필요할 때만 비동기적으로 로드(on-demand)하도록 만드는 최적화 기법입니다 [1, 2]. 이를 통해 초기 자바스크립트 번들 크기를 50~100KB 수준으로 줄여 사용자가 의미 있는 콘텐츠를 더 빨리 볼 수 있게 해줍니다 [3]. 결과적으로 초기 로드 시간, TTFB(Time to First Byte), TTI(Time to Interactive)를 대폭 단축하여 코어 웹 바이탈(Core Web Vitals) 및 검색 엔진 최적화(SEO) 성능을 크게 향상시킵니다 [4, 5].
|
|
|
|
## 📖 Core Content
|
|
* **기본 작동 원리와 React API 적용:**
|
|
최신 React 애플리케이션에서는 `React.lazy`와 `Suspense` API를 통해 손쉽게 코드 스플리팅과 지연 로딩(Lazy Loading)을 구현할 수 있습니다 [4]. `React.lazy`는 동적 가져오기(dynamic import)를 통해 컴포넌트를 일반적인 렌더링 방식으로 처리하게 해주며, `Suspense`는 해당 컴포넌트가 로드될 때까지 대기하는 동안 스켈레톤 화면이나 로딩 스피너와 같은 대체(fallback) UI를 제공합니다 [4, 6].
|
|
* **라우트 및 컴포넌트 기반 분할 (Route & Component-level Splitting):**
|
|
가장 효과적이고 일반적으로 권장되는 분할 지점은 라우트(Route) 단위입니다 [7]. 사용자가 특정 페이지로 이동할 때만 해당 라우트의 코드를 로드함으로써 초기 번들 크기를 급격히 줄일 수 있으며, React Router의 프레임워크 모드에서는 라우트 기반 분할이 기본적으로 자동 적용됩니다 [1, 8]. 또한, 차트, 에디터, 탭, 모달 등 초기 화면에 당장 보이지 않거나 용량이 큰 UI 요소에 대해서는 컴포넌트 수준의 분할을 추가로 적용할 수 있습니다 [7, 9].
|
|
* **성능 지표(Core Web Vitals)와 SEO에 미치는 영향:**
|
|
분할되지 않은 2MB 이상의 거대한 자바스크립트 번들은 브라우저의 메인 스레드를 막아 INP(Interaction to Next Paint)를 높이고 LCP(Largest Contentful Paint)를 지연시킵니다 [5, 10]. 코드 스플리팅을 적절히 구성하면 메인 번들 크기를 1.8MB에서 320KB까지 줄이는 등의 최적화가 가능해져, INP 점수를 100ms 가량 향상시키고 전체적인 페이지 상호작용성과 SEO 랭킹을 방어할 수 있습니다 [10, 11].
|
|
* **최적화 모범 사례 및 주의사항:**
|
|
웹팩 매직 주석(Webpack Magic Comments) 등을 사용한 사전 페치(Prefetching)나 사전 로딩(Preloading)을 통해 사용자 경험을 매끄럽게 만들 수 있습니다 [12]. 또한, 네트워크 오류나 청크 로딩 실패 상황을 우아하게 처리하기 위한 에러 바운더리(Error Boundaries) 구현이 필수적입니다 [13]. 다만, 지나치게 세밀한 단위로 과도하게 분할(Over-splitting)하는 것은 오히려 네트워크 오버헤드를 증가시켜 성능을 저하시키므로 주의해야 합니다 [7, 8].
|
|
|
|
## 🔗 Knowledge Connections
|
|
- **Related Topics:** [[Lazy Loading]], [[Core Web Vitals]], [[Interaction to Next Paint (INP)]], [[Largest Contentful Paint (LCP)]], [[React Router]], [[Suspense]]
|
|
- **Projects/Contexts:** [[Next.js]], [[React Applications]], [[E-commerce Optimization]]
|
|
- **Contradictions/Notes:** 소스에 따르면 코드 스플리팅은 초기 로딩 속도와 웹 성능 향상을 위해 필수적인 기법이지만, 무분별하게 과도한 분할(over-splitting)을 적용할 경우 브라우저가 너무 많은 청크를 로드해야 하므로 오히려 네트워크 오버헤드(overhead)가 증가해 성능이 악화될 수 있다는 점을 경고하고 있습니다 [7, 8, 14].
|
|
|
|
---
|
|
*Last updated: 2026-04-26* |