30 lines
2.8 KiB
Markdown
30 lines
2.8 KiB
Markdown
---
|
|
id: FE-PERF-CODE-SPLIT-001
|
|
category: "10_Wiki/💡 Topics/AI"
|
|
confidence_score: 1.0
|
|
tags: [performance, code-splitting, optimization, lazy-loading, suspense, bundling, vite, nextjs, core-web-vitals]
|
|
last_reinforced: 2026-04-26
|
|
---
|
|
|
|
# Code Splitting and Frontend Performance Optimization (코드 스플리팅과 성능 최적화)
|
|
|
|
## 📌 한 줄 통찰 (The Karpathy Summary)
|
|
> "한꺼번에 전송되는 거대한 자바스크립트 번들은 사용자의 기다림을 고통으로 바꾼다. 번들을 의미 있는 조각(Chunks)으로 나누고 필요할 때만 호출(On-demand)하여, 첫 화면의 주인공을 0.1초라도 빨리 무대에 올려라" — 초기 로딩 속도와 런타임 반응성을 극대화하는 핵심 전략.
|
|
|
|
## 📖 구조화된 지식 (Synthesized Content)
|
|
- **추출된 패턴:** "Granular Bundling and Adaptive Resource Loading" — 애플리케이션 코드를 라우트, 컴포넌트, 라이브러리 단위로 세분화하고 브라우저의 렌더링 스케줄에 맞춰 로딩 우선순위를 조정하는 패턴.
|
|
- **핵심 최적화 기법:**
|
|
- **Route-based Splitting:** 사용자가 현재 보지 않는 페이지의 코드를 로드하지 않도록 라우터 수준에서 지연 로딩(`React.lazy`) 적용.
|
|
- **Component-level Lazy Loading:** 무거운 서드파티 라이브러리(차트, 에디터)나 특정 상호작용 후에만 필요한 UI 요소를 별도 청크로 분리.
|
|
- **Vendor Splitting (Manual Chunks):** 자주 변경되는 비즈니스 로직과 변경이 적은 외부 라이브러리(`react`, `react-dom`)를 분리하여 브라우저 캐싱 효율 극대화.
|
|
- **Resource Prioritization:** `preload`, `prefetch` 힌트를 활용하여 다음에 필요한 자산을 백그라운드에서 미리 준비.
|
|
- **의의:** LCP와 INP 지표를 획기적으로 개선하여 검색 엔진 순위와 사용자 전환율(Conversion Rate)을 동시에 높임.
|
|
|
|
## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
|
|
- **과거 데이터와의 충돌:** 과거에는 HTTP/1.1 환경에서 요청 수를 줄이기 위해 하나의 거대한 번들(One big bundle)이 유리했으나, 현대 정책은 HTTP/2 이상의 다중화(Multiplexing) 환경에 최적화된 '다중 청크 정책'을 권장함.
|
|
- **정책 변화:** Antigravity 프로젝트는 200KB 이상의 단일 JS 파일 생성을 금지 정책으로 하며, 모든 동적 임포트 시 로딩 상태(Loading Spinner/Skeleton) 제공 정책을 의무화함.
|
|
|
|
## 🔗 지식 연결 (Graph)
|
|
- [[JavaScript-Optimization-Patterns]], [[Largest-Contentful-Paint-LCP]], [[Interaction-to-Next-Paint-INP]], Vite-Build-Optimization, [[Modern-Frontend-Engineering-Architecture]]
|
|
- **Raw Source:** 00_Raw/코드 스플리팅 및 성능 최적화(Code Splitting & Performance Optimization).md
|