W·07WEB DEVELOPMENT2025.09.011 MIN READ
Web Bundlers: Why we need Webpack, Rollup, and Vite (Deep Dive)
번들러: Webpack, Rollup, Vite가 하는 일의 본질 (대규모 업데이트)
Understanding the evolution from script tags to Webpack and Vite. How Tree Shaking, Minification, and Dead Code Elimination work under the hood.
c
codemapo
INTERDISCIPLINARY DEV · SEOUL
9. Summary
- Bundler: Graph builder + Transformer + Merger.
- Tree Shaking: Removes dead code via Static Analysis.
- Vite: Uses Native ESM for instant dev server, Rollup for prod build.
- Turbopack: Rust-powered, function-level caching, persistent cache for next-gen speed.
- Performance: Code Splitting is key for loading speed. Minimizing bundle size is the #1 goal for performance.
- Common Pitfalls: Barrel exports, importing entire lodash, forgetting sideEffects, not using dynamic imports for routes.