Bundle

A bundle is a single file (or small set of files) that combines multiple JavaScript modules, CSS files, and other assets into optimized packages for delivery to the browser.

Why Bundling?

• Reduces the number of HTTP requests
• Enables code splitting and lazy loading
• Optimizes file sizes through minification
• Handles module dependencies automatically
• Supports modern JavaScript features via transpilation

Popular Bundlers

• Webpack: Most widely used, highly configurable
• Vite: Fast development server with instant HMR
• Rollup: Optimized for libraries
• esbuild: Extremely fast bundler written in Go
• Parcel: Zero-config bundler

Bundle Optimization

javascript
// Code splitting example
const UserProfile = lazy(() => import('./UserProfile'))

Techniques include:

• Tree shaking (removing unused code)
• Code splitting
• Compression (gzip, brotli)
• Minification