The Genealogy of Bundlers
The Genealogy of Bundlers — From webpack to Rolldown
Frontend bundlers have branched out rapidly over the past decade or so.
1. What a bundler does
① Build the dependency graph by following imports from the entry
② Transform each module (JSX → JS, TS → JS, SCSS → CSS)
③ Combine the graph into a browser-ready bundle
④ Remove unused code (tree-shaking) + split code (code splitting)
Dev and prod have different demands. In dev, fast startup and HMR (Hot Module Replacement) matter; in prod, small and fast output code matters. Whether to solve both with one tool or different tools created the branches.
2. Core concepts
HMR (Hot Module Replacement) — when a file changes, replace just that module without reloading the page. webpack popularized it around 2016, and Vite redefined it more rapidly on top of ESM.
Tree-shaking — remove imports that are not used from the output. The static structure of ES Modules (top-level import/export) makes analysis possible. CommonJS is dynamic and hard to analyze.
code splitting — split into route or dynamic-import units instead of sending everything at once. import("./Big") becomes a separate chunk.
Native ESM — browsers can directly understand ES Modules via <script type="module"> (2018+, all majors). The path of running code in dev without bundling at all opened up (Vite's starting point).
3. Tool timeline
| Tool | First release | Author | Language | Notes |
|---|---|---|---|---|
| webpack | 2012 | Tobias Koppers | JS | Largest user base. Still maintained. |
| Browserify | 2011 | substack | JS | The pre-webpack standard. |
| Rollup | 2015 | Rich Harris | JS | Strong for library bundles. First-class ESM. |
| Parcel | 2017 | Devon Govett | JS → Rust (2.x) | Emphasizes 0-config. |
| esbuild | 2020 | Evan Wallace | Go | Very fast transpile and bundle. |
| swc | 2019 | DongYoon Kang | Rust | A Babel replacement transpiler. Adopted by Next.js. |
| Vite | 2020 | Evan You | JS + esbuild + Rollup | dev is native ESM, prod is Rollup. |
| Turbopack | 2022 | Vercel | Rust | webpack's successor. Default for Next.js dev. |
| Bun | 2023 (1.0) | Jarred Sumner | Zig | runtime + package + bundler. |
| Rolldown | 2024 | VoidZero (Evan You) | Rust | A Rust rewrite of Rollup. Targeting Vite prod successor. |
The tools whose language column is bold form the trend of "rewriting JS tools in faster systems languages."
4. Separation of transpiler and bundler
| Tool | Transpile | Bundle | Dev server |
|---|---|---|---|
| Babel | O | X | X |
| swc | O | (basic) | X |
| esbuild | O | O | (lightweight) |
| Rollup | (plugin) | O | (plugin) |
| webpack | (loader) | O | webpack-dev-server |
| Vite | (esbuild + swc) | (Rollup) | O |
| Turbopack | (swc) | O | O |
A characteristic of Vite is that it uses different bundlers for dev and prod. In dev, esbuild pre-bundles dependencies once and user code is served as native ESM. In prod, Rollup bundles (with the transition to Rolldown in progress).
5. Why dev and prod differ
A bundled large file pairs well with prod compression, caching, and HTTP/2 multiplexing. In dev, that same work eats startup time on every change. After browsers came to understand ESM, sending modules as-is in dev without bundling became faster. This separation is Vite's identity.
6. Pairing with frameworks
- Tauri — the framework itself does not pick a bundler, but the template default is Vite.
- Next.js — from 9, layered its own build on top of webpack; from 13 to 15, gradually introduced Turbopack in dev, and from 15+ it is the default in dev. Prod is in transition through coexistence of webpack and Turbopack.
- Vite — its own dev server + Rollup → transition to Rolldown for prod is in progress. VoidZero (founded 2024 by Evan You) maintains tools like Vite, Rolldown, and oxc under one company.
7. Frameworks as compilers
There is also a branch where the bundler stays light and the compiler does more work.
- Svelte compiler — translates components directly into efficient imperative JS. Almost no runtime.
- SolidJS — translates JSX into fine-grained reactive code.
- Astro — splits hydration per island.
These tools also internally rely on esbuild, Vite, or Rollup, but from a user's perspective "the framework decides."
8. Module Federation
Module Federation in webpack 5 (2020) is a model where build artifacts share code at runtime. Often discussed in the micro-frontend camp of large organizations.
9. Vite project and tsconfig
pnpm create vite@latest my-app -- --template react-ts
cd my-app
pnpm install
pnpm dev # esbuild prebundle + ESM dev server
pnpm build # prod bundle with Rollup
{
"compilerOptions": {
"module": "ESNext",
"moduleResolution": "Bundler" // for bundler environments like Vite/Next
}
}
"Bundler" (TS 5.0+) suits environments where the bundler resolves imports. For Node-only, use "NodeNext".
10. Common pitfalls
CommonJS and ESM mixing — most pitfalls live at this boundary. If a library exports only CJS, tree-shaking does not work well. Look at package.json's "exports" and "type": "module" fields.
__dirname, require — not present in ESM modules. Use import.meta.url instead.
ts → js debugging — when the bundler does not emit accurate sourcemaps, error stacks point at build outputs. Always enable sourcemap: true in dev.
Patterns that prevent tree-shaking — modules with side effects (global registration, etc.) are not removed. Declare "sideEffects": false in the library's package.json.
Differences between dev and prod results — Vite's dev is ESM and prod is bundled, so module resolution can differ. Sometimes shows up in large libraries (dual-package hazard).
webpack 5's polyfill removal — the behavior of automatically polyfilling Node modules like crypto and path was removed in 5. Explicit fallbacks are required.
Turbopack's prod compatibility — when there is a stage of Turbopack in dev and webpack in prod, verify the differences.
Closing thoughts
The trend in bundlers is toward "less work with faster tools." In dev, native ESM + esbuild prebundle is becoming the standard. On the prod side, Rolldown and Turbopack's Rust rewrites are in progress, and the paradigm may shift again within a year or two.
Next
- tauri-mobile-admob
- sqlite-local
We refer to webpack, Vite, Rollup, esbuild, swc, Turbopack, Rolldown, Module Federation, and TC39 Modules.