Antigravity Agent
3.5 KiB
3.5 KiB
📌 Brief Summary
Vite 빌드 번들 최적화는 초기 로딩 속도와 캐시 효율을 극대화하기 위해 JavaScript 번들 크기를 줄이고 로딩 구조를 최적화하는 과정이다. Rollup 옵션을 통한 벤더 라이브러리 분리(manualChunks)와 지연 로딩(React.lazy)을 결합하여, 사용자가 필요한 시점에 필요한 코드만 다운로드하도록 설계하는 것이 핵심이다.
📖 Core Content
- 대규모 번들 이슈 해결
- 기본적으로 하나의 거대한
index.js로 묶이는 문제를 해결하여 FCP, LCP 등 Core Web Vitals 지표를 개선한다.
- 기본적으로 하나의 거대한
- manualChunks를 통한 벤더 분리
- 자주 바뀌지 않는
react,react-dom등 외부 라이브러리를 별도 청크로 분리하여 브라우저 캐싱 효율을 극대화한다.
- 자주 바뀌지 않는
- 라우트 레벨 코드 스플리팅
React.lazy와<Suspense>를 활용해 페이지 단위로 코드를 쪼개어 초기 진입 시 다운로드되는 리소스를 최소화한다.
- 번들 시각화 및 분석
rollup-plugin-visualizer를 통해 번들 내부를 시각적으로 분석하고, 불필요하게 비대해진 모듈을 찾아 트리 쉐이킹(Tree-shaking)을 적용하거나 대체한다.
⚖️ Trade-offs & Caveats
- 청크 파편화: 번들을 너무 잘게 쪼갤 경우 HTTP 요청 횟수가 급증하여 오히려 네트워크 병목과 Waterfall 현상이 발생할 수 있다.
- 개발 vs 프로덕션 차이: Vite는 개발 시 네이티브 ESM을 사용하지만 프로덕션은 Rollup을 사용하므로, 빌드 결과물에서만 발생하는 성능 이슈나 경고를 상시 확인해야 한다.
- 캐시 무효화: 벤더 번들을 너무 크게 묶으면 라이브러리 하나만 업데이트해도 거대한 벤더 파일 전체의 캐시가 무효화되는 트레이드오프가 있다.
🔗 Knowledge Connections
Related Concepts (Auto-Linked)
- Core_Web_Vitals
- Index
- JavaScript
- React
- React Server Components
- Research
- Rollup
- Server Components
- Strategy
Related Concepts
- Rollup: Vite의 프로덕션 빌드 엔진 (관계: 구동 원리)
- React.lazy & Suspense: 코드 스플리팅의 실천 수단 (관계: 구현 도구)
- Core Web Vitals: 최적화의 최종 목적지 (관계: 성능 지표)
Deeper Research Questions
manualChunks를 세밀하게 설정할 때, 네트워크 오버헤드를 최소화하면서 캐시 히트율을 극대화하는 최적의 청크 크기 기준은?- Vite의 ESM 기반 개발 서버와 Rollup 기반 빌드 환경 간의 차이로 인해 발생하는 'Silent Errors' 사례와 방지책은?
- 동적 임포트로 쪼개진 청크들을 사용자가 클릭하기 전에 미리 불러오는 'Prefetching' 전략의 Vite 자동화 방법은?
- 트리 쉐이킹이 작동하지 않는 CommonJS 기반 라이브러리를 ESM으로 안전하게 변환하거나 대체하는 가이드라인은?
- HTTP/2 또는 HTTP/3 환경에서 다수의 작은 청크 전송이 번들링된 하나의 큰 파일 전송보다 유리해지는 구체적 조건은?
Practical Application Contexts
- 성능 경고 해결: "Chunks are larger than 500 kB" 빌드 경고 발생 시 즉각적인 대응.
- 사용자 경험 개선: 느린 네트워크 환경의 사용자를 위한 초기 로딩 최적화 및 안정적 인터랙션 제공.
Adjacent Topics
- Service Worker & Caching Strategy
- React Server Components (RSC)
- Modern Build Tools (Turbopack, Rspack) Comparison