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.