A modern project easily reaches two hundred source files, plus the installed dependencies. Serving each of them to the browser would mean as many requests, and a page left waiting.
A bundler solves that ahead of time: it assembles everything that will be needed, once, before going live.
Definition
A bundler is a tool that starts from an entry file, follows every import to build the full dependency graph, then writes a handful of optimized files in place of the hundred original modules.
// src/main.js, the entry point
import './style.css';
import { formatPrice } from './utils.js';
import { z } from 'zod';
document.querySelector('#price').textContent = formatPrice(29.9);
// After bundling:
// dist/assets/main-8f3a1c.js a single minified file
// dist/assets/main-2b90d4.css the extracted stylesThe suffix added to the file name is computed from the content. It changes on every edit, which lets the browser cache older files for a very long time without ever serving a stale version.
What a bundler does beyond gluing files together
- Resolving paths: turning
import { z } from 'zod'into a real file insidenode_modules. - Transforming sources: sending JSX, TypeScript or modern CSS through the right tools, Babel among them.
- Pruning: dropping exported code nobody imports, through Tree shaking.
- Shrinking: cutting the size of the result through Minification.
- Splitting: isolating in separate files whatever loads on demand, thanks to import() (dynamic import).
- Mapping back: producing a Source map so the original code is readable in the browser.
Tools change, the principle does not. Webpack held the position for years, Vite took it on new projects, and bundlers written in compiled languages keep gaining ground on speed. What you learn about the dependency graph carries from one to the next.
Does everything need bundling?
No. A page loading three ES modules and no dependency gains nothing: browsers follow imports perfectly well on their own. Adding a build tool at that stage costs more configuration than it returns.
The need shows up with installed dependencies, often split across dozens of files, with languages that require translation, and with any serious effort to reduce the weight sent over the wire.
Frequently asked questions
Are a bundler and a development server the same thing?
Current tools do both, yet they are two different jobs. The development server hands your files over while you work and refreshes the screen on every save; the bundler produces the optimized version meant for release. The strategies each one uses are very different.
Is one big file the right goal?
Not really. A single file forces a full re-download after the smallest fix, and loads code the current page never uses. Sensible splitting, guided by pages and by heavy blocks, gives better results.
Why is my bundle so heavy?
Almost always because of a dependency, rarely because of your own code. Bundlers can produce a visual report of how much each module weighs: start there, look for the library imported whole for a single function, and check that nothing is included twice in two different versions.