Last updated: Apr 29, 2026

Build Pipeline

Source code goes through several steps before it can run in the browser — compiling, bundling, tree-shaking, and minifying.

Compiling

A compiler converts TypeScript, JSX, or modern JavaScript into plain JavaScript that browsers (or other runtimes) can execute. It can also downlevel syntax — for example, turning optional chaining into a ternary — so the output runs in older environments. The compiler does not bundle or merge files; it transforms them one-to-one.

Common tools: Babel, tsc, SWC.

Bundling

A bundler starts from an entry file, walks the import graph, and merges all reachable modules into one or a few output files. This reduces the number of network requests the browser has to make. How the output is split (single bundle, per-route chunks, shared chunks) is configurable.

Common tools: webpack, Rollup, esbuild.

Tree-shaking

Tree-shaking is dead-code elimination at the module level. Because ES module import/export statements are statically analyzable, the bundler can determine which exports are never imported and drop them from the final output. CommonJS require is dynamic, so it cannot be tree-shaken reliably. Libraries mark themselves with "sideEffects": false in package.json to signal that unused files can be safely removed.

Minifying

A minifier reduces file size without changing behavior. It strips whitespace and comments, shortens variable names, and removes unreachable branches. The result is harder to read but identical in execution.

Common tools: Terser, esbuild, SWC.

Source → Compile → Bundle → Tree-shake → Minify → Output