Bundler

Updated September 30, 20262 min read

In short

A bundler is a build tool that combines JavaScript modules and their dependencies into a few optimized files that browsers can download and run quickly.

What is a JavaScript bundler?

A bundler is a tool that takes the many source files of a web app, such as JavaScript or TypeScript modules, CSS, images, and packages installed from npm, and combines them into a small number of optimized files called bundles. Modern apps can contain thousands of modules, and loading each one as a separate request would make pages slow, so the bundler packages them for the browser.

It starts from an entry file, follows every import statement to build a dependency graph, and outputs the code in the right order. Along the way it usually transforms code, for example compiling TypeScript or JSX, removes unused exports through tree shaking, minifies the result to make it smaller, and splits it into chunks through code splitting so each page downloads only what it needs. Widely used bundlers include webpack, Rollup, esbuild, Parcel, Rolldown, and Turbopack, and tools such as Vite wrap them with a fast development server.

Think of packing for a trip: instead of carrying fifty loose items, you fold everything into one well-organized suitcase and leave behind what you won't need. Bundlers also power the development experience with local dev servers and hot module replacement, which swaps changed code into the running page without a full reload.

A bundler is often confused with a package manager or a transpiler. A package manager such as npm downloads the libraries your project depends on, a transpiler such as Babel or the TypeScript compiler converts code from one syntax to another, and a bundler combines all of that code into files ready for the browser. Because browsers now support native ES modules, some tools skip bundling during development, but production builds are still usually bundled for speed.

Key takeaways

A bundler combines many modules and assets into a few optimized files.
It follows import statements from an entry point to build a dependency graph.
Tree shaking, minification, and code splitting make bundles smaller and faster to load.
A package manager installs dependencies; a bundler packages them for the browser.
Dev servers built on bundlers offer hot module replacement during development.

Example

What a bundler does with two modulesjavascript

// src/math.js
export const add = (a, b) => a + b;
export const unused = () => "never imported"; // removed by tree shaking

// src/main.js (the entry point)
import { add } from "./math.js";
console.log(add(2, 3));

// Build with a command such as:
// npx esbuild src/main.js --bundle --minify --outfile=dist/bundle.js

// dist/bundle.js is roughly one minified line:
// (()=>{var o=(n,d)=>n+d;console.log(o(2,3));})();

Readers ask

Why do I need a bundler?

A bundler turns many modules and npm packages into a few optimized files, which reduces network requests, removes unused code, and lets you use TypeScript, JSX, and modern syntax. Small sites with only a few scripts can work fine without one.

What is the difference between a bundler and a package manager?

A package manager such as npm, pnpm, or Yarn downloads the libraries your project uses and tracks their versions. A bundler then combines your code and those libraries into files that browsers can load.

What is tree shaking?

Tree shaking is a bundler optimization that removes exports your code never imports. It works best with ES module import and export syntax, because those can be analyzed without running the code.