Why bundle at all
A bundler takes your many small source modules and their dependencies and combines them into a smaller number of optimized files for the browser. Modern code is split across hundreds of files using import and export, which is great for authoring but inefficient to load one by one.
- The bundler builds a dependency graph starting from an entry point.
- It follows every import to discover all needed modules.
- It outputs combined files plus assets like CSS and images.
What a bundler also does
Beyond merging files, a bundler transforms and optimizes code on the way out.
- It can transpile newer syntax down to what browsers support.
- It minifies output by removing whitespace and shortening names.
- It rewrites module references into a single runtime that resolves them.
Bundling matters because loading many tiny files adds request overhead and ordering problems. By producing fewer, optimized files, the bundler reduces requests and lets browsers cache effectively. The catch is build time and configuration, but the payoff is faster, more reliable loading in production.
Key idea
A bundler walks the dependency graph from an entry point and merges, transpiles, and minifies many source modules into a few optimized files, cutting request overhead so the browser loads your app efficiently.