Antigravity Agent
2.9 KiB
2.9 KiB
id, category, confidence_score, tags, last_reinforced
| id | category | confidence_score | tags | last_reinforced | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| FE-PERF-CODE-SPLIT-001 | 10_Wiki/💡 Topics/AI | 1.0 |
|
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힌트를 활용하여 다음에 필요한 자산을 백그라운드에서 미리 준비.
- Route-based Splitting: 사용자가 현재 보지 않는 페이지의 코드를 로드하지 않도록 라우터 수준에서 지연 로딩(
- 의의: 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