Bundling
The process of combining multiple JavaScript modules and their dependencies into optimized files that can be served to the browser.
Detailed Explanation
Bundling takes your modular JavaScript code (imports, requires) and combines them into one or a few files that browsers can execute. Without bundling, browsers would need to make hundreds of separate HTTP requests for each module.
Bundlers also handle: tree shaking (removing unused code), minification (reducing file size), code splitting (breaking into chunks), transpilation (converting modern JS for older browsers), and asset handling (CSS, images). Popular bundlers: webpack (most configurable), Vite (fast, modern), esbuild (fastest), Rollup (library-focused), and Parcel (zero-config).
Why It Matters
Bundling is essential for modern web development. It reduces HTTP requests, optimizes code, and enables module-based development.
Real-World Example
A developer imports 50 modules in their app. Without bundling, the browser would make 50 HTTP requests. With Vite bundling, the app is served as 3 optimized chunks: main app code, vendor code, and route-specific code.
When to Use
For any web application with more than a few JavaScript files. Bundling is a fundamental part of the modern web build process.
Advantages
- Reduces HTTP requests
- Enables module-based development
- Tree shaking removes unused code
- Minification reduces file size
- Source maps for debugging
Disadvantages
- Build configuration complexity
- Build time for large projects
- Debugging with source maps
- Hot reload speed in development
- Understanding bundler behavior
Related Terms
Frequently Asked Questions
Which bundler should I use?
Vite for new projects (fast, modern, great DX). webpack for complex configurations and legacy projects. esbuild for fastest builds. Rollup for libraries. Parcel for zero-config setups.
What is tree shaking?
Tree shaking removes unused code from your bundle. If you import a library but only use one function, tree shaking removes the rest. Named exports are tree-shakeable; default exports often are not.
What is minification?
Minification reduces file size by removing whitespace, shortening variable names, and optimizing code. Tools: Terser (JavaScript), CSSNano (CSS). Minification typically reduces size by 30-60%.
Do I need to configure bundling manually?
Not necessarily. Frameworks (Next.js, Vite, Create React App) handle bundling configuration. You can customize when needed. Start with framework defaults and configure as required.
What is source mapping?
Source maps map minified/bundled code back to original source code. They enable debugging with original file names and line numbers. Enable in development; disable in production for security.