[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
+165
-106
@@ -2,132 +2,191 @@
|
||||
id: wiki-2026-0508-rollup
|
||||
title: Rollup
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
aliases: [rollup-bundler, rollupjs]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [uncategorized]
|
||||
confidence_score: 0.9
|
||||
verification_status: applied
|
||||
tags: [bundler, build-tool, esm, library-build, frontend]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
language: javascript
|
||||
framework: rollup-4
|
||||
---
|
||||
|
||||
# [[Rollup|Rollup]]
|
||||
# Rollup
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
Rollup은 2025년 기준 최신 프론트엔드 빌드 도구인 Vite의 프로덕션 빌드를 백그라운드에서 담당하는 모듈 번들러입니다 [1]. 개발 단계에서는 네이티브 ES 모듈(ESM)을 사용하는 Vite가 실제 배포 시점에는 Rollup으로 전환하여 애플리케이션 코드를 병합하고 최적화합니다 [1, 2]. 자동 코드 분할(Code Splitting)과 사용하지 않는 코드를 제거하는 트리 쉐이킹(Tree-shaking) 기능을 통해 매우 최적화된 최종 에셋을 생성하는 것이 핵심 역할입니다 [1].
|
||||
## 매 한 줄
|
||||
> **"매 ESM-first 의 module bundler 의 library-grade output 의 specialized."**. Rich Harris 의 2015 의 의 originated, 매 tree-shaking 의 pioneer — 매 2026 의 Rollup 4.x 의 매 SWC/Oxc-powered, library 의 publishing (NPM packages, SDKs) 의 의 default choice 이며, Vite 의 production build 의 underlying engine.
|
||||
|
||||
## 📖 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].
|
||||
## 매 핵심
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
* **초기 설정 부족 시 대용량 번들 발생:** 기본 설정으로 둘 경우 애플리케이션의 모든 종속성이 하나의 파일에 Eager Import 되어 결합될 수 있습니다 [3]. 이는 미니파이(Minification) 후에도 500kB를 초과하는 대규모 청크(Large Chunks)를 생성하여, 다운로드 시간을 지연시키고 저사양 기기에서 파싱 및 컴파일에 무리를 줄 수 있습니다 [3, 8, 9].
|
||||
* **캐시 무효화(Cache Invalidation) 문제:** 단일 거대 번들로 빌드할 경우 애플리케이션의 작은 코드 하나만 수정하더라도 전체 번들이 새로 해시(Hash)되어 사용자는 모든 JavaScript 파일을 다시 다운로드해야 하는 비효율성이 발생합니다 [9]. 이를 방지하려면 `manualChunks` 설정과 `React.lazy`를 결합한 라우트 기반 코드 분할 등 추가적인 최적화 작업이 강제됩니다 [3, 6].
|
||||
### 매 정의
|
||||
- ESM-native bundler — `import`/`export` 의 first-class.
|
||||
- Tree-shaking 의 pioneer (2015) — dead code elimination via static analysis.
|
||||
- Output formats: ESM, CJS, UMD, IIFE, AMD, SystemJS.
|
||||
- Plugin-driven — minimal core, everything via `@rollup/plugin-*`.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
### Related Concepts
|
||||
### 매 vs. 다른 bundlers
|
||||
- **Vite (dev)**: Rollup 의 production 의 wraps — dev 의 esbuild + Rollup of build.
|
||||
- **webpack**: 매 application bundling 의 strong, code splitting 의 mature; Rollup 의 library output 의 cleaner.
|
||||
- **esbuild**: 10-100x faster, 그러나 plugin ecosystem 의 narrower.
|
||||
- **Bun.build / tsdown**: 2026 의 emerging, Rollup-compatible plugin API.
|
||||
|
||||
#### [아키텍처/기반 기술]
|
||||
- Vite
|
||||
- 연결 이유: Rollup은 Vite의 아키텍처 내에서 프로덕션 배포 시 최적화된 빌드를 수행하는 내부 엔진으로 작동합니다 [1].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 개발 모드(ESM)와 배포 모드(Rollup)를 다르게 가져가는 Vite의 하이브리드 번들링 아키텍처 전략을 이해할 수 있습니다 [1, 2].
|
||||
- [[Tree Shaking (번들 크기 최적화)|Tree-shaking]]
|
||||
- 연결 이유: Rollup이 배포용 코드를 최적화할 때 사용하지 않는 코드를 덜어내는 핵심 메커니즘입니다 [1].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: ES 모듈 기반 라이브러리 사용이 왜 최종 번들 사이즈 최적화에 필수적인지 파악할 수 있습니다 [10].
|
||||
### 매 응용
|
||||
1. NPM library publishing (React component lib, SDK, utils package).
|
||||
2. Multi-format output (ESM + CJS + types).
|
||||
3. Vite 의 production build (transitively).
|
||||
4. Storybook 의 build pipeline.
|
||||
|
||||
#### [구현/활용 도구]
|
||||
- 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 지표 향상에 미치는 구체적인 인과관계는 무엇인가?
|
||||
### Library bundle (TS + multi-format)
|
||||
```js
|
||||
// rollup.config.js
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
import { nodeResolve } from '@rollup/plugin-node-resolve';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import dts from 'rollup-plugin-dts';
|
||||
|
||||
### 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*
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
|
||||
**추출된 패턴:**
|
||||
> *(TODO)*
|
||||
|
||||
**세부 내용:**
|
||||
- *(TODO)*
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
|
||||
## 💻 코드 패턴 (Code Patterns)
|
||||
|
||||
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
|
||||
|
||||
```text
|
||||
# TODO
|
||||
export default [
|
||||
{
|
||||
input: 'src/index.ts',
|
||||
output: [
|
||||
{ file: 'dist/index.cjs', format: 'cjs', sourcemap: true },
|
||||
{ file: 'dist/index.mjs', format: 'esm', sourcemap: true },
|
||||
],
|
||||
plugins: [nodeResolve(), commonjs(), typescript({ tsconfig: './tsconfig.build.json' })],
|
||||
external: ['react', 'react-dom'],
|
||||
},
|
||||
{
|
||||
input: 'src/index.ts',
|
||||
output: [{ file: 'dist/index.d.ts', format: 'es' }],
|
||||
plugins: [dts()],
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
### `package.json` exports map
|
||||
```json
|
||||
{
|
||||
"name": "@org/lib",
|
||||
"type": "module",
|
||||
"main": "./dist/index.cjs",
|
||||
"module": "./dist/index.mjs",
|
||||
"types": "./dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.cjs"
|
||||
}
|
||||
},
|
||||
"files": ["dist"]
|
||||
}
|
||||
```
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### Tree-shaking 의 verify
|
||||
```js
|
||||
// rollup.config.js
|
||||
export default {
|
||||
// ...
|
||||
treeshake: {
|
||||
moduleSideEffects: false, // aggressive — assume no side effects
|
||||
propertyReadSideEffects: false,
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### Plugin: image inlining
|
||||
```js
|
||||
import image from '@rollup/plugin-image';
|
||||
import url from '@rollup/plugin-url';
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
export default {
|
||||
plugins: [
|
||||
url({ limit: 8192 }), // inline <8kb as base64
|
||||
image(),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
### React component library
|
||||
```js
|
||||
import { babel } from '@rollup/plugin-babel';
|
||||
import postcss from 'rollup-plugin-postcss';
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
export default {
|
||||
input: 'src/index.tsx',
|
||||
output: { dir: 'dist', format: 'esm', preserveModules: true },
|
||||
external: ['react', 'react-dom', /^@radix-ui/],
|
||||
plugins: [
|
||||
postcss({ modules: true, extract: 'styles.css' }),
|
||||
babel({ babelHelpers: 'bundled', presets: ['@babel/preset-react'] }),
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### Watch mode + dev server
|
||||
```bash
|
||||
rollup -c -w
|
||||
# or use Vite which wraps Rollup for production
|
||||
vite build
|
||||
```
|
||||
|
||||
### Code splitting (manual chunks)
|
||||
```js
|
||||
export default {
|
||||
input: { main: 'src/main.ts', admin: 'src/admin.ts' },
|
||||
output: {
|
||||
dir: 'dist',
|
||||
format: 'esm',
|
||||
manualChunks: {
|
||||
vendor: ['react', 'react-dom'],
|
||||
utils: ['lodash-es', 'date-fns'],
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| Library / SDK publishing | **Rollup** (clean output, multi-format) |
|
||||
| Application bundle | **Vite** (Rollup 의 wraps) or webpack |
|
||||
| Speed-critical (CI) | **esbuild** or **tsdown** (Rolldown) |
|
||||
| Storybook / docs build | Rollup-based (Vite mode) |
|
||||
| Monorepo internal package | tsup (esbuild) or Rollup with `preserveModules` |
|
||||
|
||||
**기본값**: library 의 의 Rollup, app 의 의 Vite (Rollup 의 production engine).
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[Module-Bundlers]] · [[JavaScript-Build-Tools]]
|
||||
- 변형: [[Vite]] · [[Rolldown]] · [[tsup]]
|
||||
- 응용: [[NPM-Package-Publishing]] · [[Component-Library-Architecture]]
|
||||
- Adjacent: [[Tree-Shaking]] · [[ESM]] · [[Webpack]] · [[esbuild]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: NPM library publishing, multi-format output, clean ESM bundles, Vite production tuning.
|
||||
**언제 X**: large application bundling (Vite/webpack), HMR-heavy dev (Vite), Node.js server (no bundling needed in 2026 ESM).
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **Bundling peer deps**: `react`/`react-dom` 의 bundle 의 included — `external` 의 declare 의 필요.
|
||||
- **CJS-only output 의 ESM-only consumer**: 2026 의 ESM-first ecosystem — dual ESM+CJS output 의 ship.
|
||||
- **Source map 의 omission**: production debugging 의 impossible — `sourcemap: true` 의 default.
|
||||
- **Plugin order 의 ignorance**: `nodeResolve` before `commonjs` before `typescript` — order matters.
|
||||
- **Vite app 의 직접 의 Rollup config**: Vite 의 abstracts — `vite.config.ts` 의 `build.rollupOptions` 의 사용.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (rollupjs.org, Rollup 4.x docs 2026, Vite documentation).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — full bundler reference + 2026 ecosystem (Rolldown, tsup) |
|
||||
|
||||
Reference in New Issue
Block a user