Bundlers. They follow your imports, gather hundreds of source files into a handful of optimised, minified files, and shrink them so browsers download less and load faster.
A bundler starts at your entry file, walks every import, and merges the whole dependency graph into one (or a few) output files. Then it minifies — strips whitespace, shortens variable names and removes dead code. Press build and watch it happen.
Classic JS-based bundlers parse and transform every module in JavaScript. esbuild (Go) and newer Rust tools (Turbopack, SWC) do it with compiled, parallel code — often 10–100× faster. Race a typical production build.
Different tools, different trade-offs — but all answer the same question: how do I turn a tree of source files into something a browser loads fast?
The configurable workhorse. Huge plugin/loader ecosystem; powers countless legacy apps. Steepest config.
JavaScriptClean ESM output and great tree-shaking — the choice for publishing libraries. Powers Vite's prod build.
JavaScriptWritten in Go. Blisteringly fast bundling & minification; used under the hood by Vite, tsup and more.
GoPoint it at an HTML file and go — sensible defaults, no config required. Great for quick projects.
JS / Rust (SWC)Rust-based successor to Webpack from the Next.js team, built for huge apps and incremental builds.
RustYou write small, focused modules and import between them. The bundler resolves that graph, concatenates and transforms it, and emits output the browser can load in one request — with tree-shaking dropping anything you never use.
// src/index.js — your entry (human-readable) import { render } from './app.js' import { format } from './utils.js' import './styles.css' render(format('hello'))
/* dist/bundle.[hash].js — one minified output */ (()=>{var e={};function t(n){return n.trim()} function r(n){document.body.textContent=n}r(t("hello"))})();
# typical commands npx webpack --mode production npx rollup -c npx esbuild src/index.js --bundle --minify --outfile=dist/bundle.js