# [[Rollup|Rollup]]

## 📌 Brief Summary
Rollup은 2025년 기준 최신 프론트엔드 빌드 도구인 Vite의 프로덕션 빌드를 백그라운드에서 담당하는 모듈 번들러입니다 [1]. 개발 단계에서는 네이티브 ES 모듈(ESM)을 사용하는 Vite가 실제 배포 시점에는 Rollup으로 전환하여 애플리케이션 코드를 병합하고 최적화합니다 [1, 2]. 자동 코드 분할(Code Splitting)과 사용하지 않는 코드를 제거하는 트리 쉐이킹(Tree-shaking) 기능을 통해 매우 최적화된 최종 에셋을 생성하는 것이 핵심 역할입니다 [1].

## 📖 Core 대Content
*   **Vite와의 하이브리드 아키텍처:** Vite는 로컬 개발 시에는 번들링 없이 네이티브 ESM으로 코드를 제공하여 극도로 빠른 시작과 HMR(Hot Module Replacement)을 지원하지만, 프로덕션 배포 시에는 Rollup을 사용하여 최적화된 번들(Bundled build)을 생성하는 하이브리드 방식을 취합니다 [1].
*   **번들 최적화 및 트리 쉐이킹 (Tree-shaking):** Rollup은 프로덕션 빌드 시 애플리케이션 내에서 사용되지 않는 코드를 자동으로 제거(Tree-shaking)하고 효율적으로 코드를 분할하여 최적화된 에셋을 제공합니다 [1]. 
*   **청크 수동 제어 (`manualChunks`):** 기본 설정 상태에서 Rollup은 애플리케이션 코드와 `node_modules`의 모든 종속성을 단일 파일(`index.js`)로 묶어 거대한 번들을 생성할 수 있습니다 [3]. 이를 해결하기 위해 대규모 프로젝트에서는 Rollup 옵션 중 `manualChunks`를 세밀하게 설정하여, 자주 변경되지 않는 무거운 벤더 라이브러리(React 코어, Recharts, Lodash, 아이콘 등)를 별도의 청크 파일로 분리하는 것이 권장됩니다 [4-6]. 
*   **캐시 효율성 개선:** `manualChunks`를 통해 벤더 라이브러리를 분리하면, 해당 라이브러리는 자주 변경되지 않기 때문에 여러 번 배포하더라도 브라우저가 이를 캐시하여 재사용할 수 있으므로 초기 로드 성능이 크게 향상됩니다 [5-7].

## ⚖️ Trade-offs & Caveats
*   **초기 설정 부족 시 대용량 번들 발생:** 기본 설정으로 둘 경우 애플리케이션의 모든 종속성이 하나의 파일에 Eager Import 되어 결합될 수 있습니다 [3]. 이는 미니파이(Minification) 후에도 500kB를 초과하는 대규모 청크(Large Chunks)를 생성하여, 다운로드 시간을 지연시키고 저사양 기기에서 파싱 및 컴파일에 무리를 줄 수 있습니다 [3, 8, 9].
*   **캐시 무효화(Cache Invalidation) 문제:** 단일 거대 번들로 빌드할 경우 애플리케이션의 작은 코드 하나만 수정하더라도 전체 번들이 새로 해시(Hash)되어 사용자는 모든 JavaScript 파일을 다시 다운로드해야 하는 비효율성이 발생합니다 [9]. 이를 방지하려면 `manualChunks` 설정과 `React.lazy`를 결합한 라우트 기반 코드 분할 등 추가적인 최적화 작업이 강제됩니다 [3, 6].

## 🔗 Knowledge Connections

### Related Concepts

#### [아키텍처/기반 기술]
- Vite
  - 연결 이유: Rollup은 Vite의 아키텍처 내에서 프로덕션 배포 시 최적화된 빌드를 수행하는 내부 엔진으로 작동합니다 [1].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 개발 모드(ESM)와 배포 모드(Rollup)를 다르게 가져가는 Vite의 하이브리드 번들링 아키텍처 전략을 이해할 수 있습니다 [1, 2].
- [[Tree Shaking (번들 크기 최적화)|Tree-shaking]]
  - 연결 이유: Rollup이 배포용 코드를 최적화할 때 사용하지 않는 코드를 덜어내는 핵심 메커니즘입니다 [1].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: ES 모듈 기반 라이브러리 사용이 왜 최종 번들 사이즈 최적화에 필수적인지 파악할 수 있습니다 [10].

#### [구현/활용 도구]
- manualChunks
  - 연결 이유: Rollup을 사용하여 거대한 메인 번들을 세분화된 벤더 청크(Vendor chunk)로 쪼갤 때 사용되는 핵심 설정입니다 [4-6].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 브라우저 캐싱을 극대화하기 위해 코드를 성격(변경 빈도)에 따라 분리하는 최적화 전략을 배울 수 있습니다 [6, 7].
- [[Code Splitting|Code Splitting]]
  - 연결 이유: Rollup의 기능과 React의 지연 로딩(`React.lazy`)을 결합하여 구현되는 성능 최적화 기법입니다 [3, 11].
  - 이 개념을 통해 더 깊게 이해할 수 있는 부분: 초기 페이로드(Payload)를 줄이고 Core Web Vitals를 개선하는 런타임 최적화 방법을 학습할 수 있습니다 [9, 12].

### Deeper Research Questions
- Vite는 왜 개발 환경에서는 Rollup을 사용하지 않고 네이티브 ESM을 사용하며, 프로덕션 빌드에서만 Rollup을 도입하는 아키텍처를 선택했는가?
- Rollup의 Tree-shaking 메커니즘은 빌드 시 어떤 방식으로 데드 코드(Dead code)를 식별하고 최종 번들에서 제외하는가?
- `manualChunks`를 사용하여 벤더(Vendor) 파일을 분할할 때 발생하는 모듈 간 중복 포함 문제를 방지하는 설정 방법은 무엇인가?
- Rollup이 생성한 번들 크기를 시각적으로 분석하기 위해 `rollup-plugin-visualizer`가 제공하는 데이터는 실제 성능 개선에 어떻게 활용되는가?
- Rollup의 빌드 최적화가 FCP, LCP, INP 등 Core Web Vitals 지표 향상에 미치는 구체적인 인과관계는 무엇인가?

### Practical Application Contexts
- **Implementation:** `vite.config.js` 내부에 `build.rollupOptions.output.manualChunks`를 구성하여 `react`, `react-dom` 등의 라이브러리를 별도의 파일로 강제 분리합니다 [4, 6].
- **System Design:** 프론트엔드 프로덕션 시스템 설계 시, 자주 변하지 않는 서드파티 라이브러리와 비즈니스 로직을 분리하여 CDN 캐시 히트율을 높이도록 설계합니다 [5, 6].
- **Operation / Maintenance:** CI/CD 파이프라인에서 "500 kB 이상의 청크" 경고가 발생할 경우, `rollup-plugin-visualizer`를 통해 번들 상태를 점검하고 분할 설정을 업데이트합니다 [8, 13, 14].
- **Learning Path:** React 최적화 학습 시, 단순히 `React.lazy()`만 배우는 것을 넘어 번들러(Rollup) 레벨에서의 코드 청킹(Chunking) 원리를 함께 학습합니다 [3, 6].
- **My Project Relevance:** Vite 기반 React 애플리케이션을 Vercel이나 AWS 서버에 배포하기 전에 빌드 속도 및 초기 다운로드 속도를 개선하기 위한 필수 점검 단계로 활용합니다 [2, 11].

### Adjacent Topics
- ES Modules (ESM)
  - 확장 방향: Rollup의 프로덕션 빌드 이전, Vite가 개발 환경에서 코드 변경 사항을 즉각적으로 브라우저에 반영하는 원리 파악 [1, 15].
- [[Core Web Vitals|Core Web Vitals]]
  - 확장 방향: Rollup의 번들 분할 및 경량화 작업이 LCP(Largest Contentful Paint)나 INP(Interaction to Next Paint)와 같은 브라우저 성능 측정 지표를 어떻게 개선하는지 조사 [9, 14].

---
*Last updated: 2026-04-30*