Bundling — Explained with Examples

Bundling combines multiple source files into optimized deployable packages, resolving dependencies and applying transformations like minification.

Bundling is the process of taking many source files (JavaScript, CSS, images) and producing fewer output files (bundles) suitable for deployment. Bundlers resolve import graphs, apply transformations (transpilation, minification), and optimize output (tree shaking, code splitting). Popular bundlers include Webpack, Rollup, esbuild, and Parcel.

Think of bundling like packing a suitcase for a trip. You have clothes, toiletries, and electronics scattered around your room (source files). A bundler organizes everything, folds efficiently (minification), removes items you don’t need (tree shaking), and packs them into one suitcase (bundle) ready for travel (deployment).

Modern bundling typically happens in two phases: building a dependency graph from entry points, then outputting bundles based on the graph. The process includes resolving modules, transforming assets, and optimizing output.

// Source files before bundling
// src/index.js
import { greet } from './utils.js';
console.log(greet('World'));

// src/utils.js
export function greet(name) {
  return `Hello, ${name}!`;
}

// After bundling (single bundle.js)
// function greet(name){return"Hello, "+name+"!"}console.log(greet("World"));

Bundling is essential for browser-based applications where HTTP/1.1 connection limits make many small files inefficient. Modern HTTP/2 reduces this concern, but bundling still provides important optimization opportunities.

Webpack, Vite, Tree Shaking, Minification

Webpack Configuration