Vite — The Modern Dev-Server-First Approach

build-tooling1-3 named Webpack's own real cost explicitly: slower dev rebuilds as a project grows, since a change forces reprocessing a chunk of the whole dependency graph. Vite exists specifically to fix that — and it does it with a genuinely different idea, not just a faster version of the same approach.

The Core Insight — Don't Bundle During Development at All

Webpack has to bundle the entire dependency graph before it can serve even a single page in development, and re-bundle a meaningful portion of it on every file change — a cost that scales with project size. Vite's insight: modern browsers natively support ES modules — real <script type="module"> tags with genuine import statements the browser itself can resolve and fetch, file by file, over the network. During development, Vite doesn't bundle the application's own source code at all. It serves source files directly, letting the browser's own native module resolution do the work. Dev server startup time stops scaling with project size, and a file change only requires the browser to re-fetch that one changed file — Hot Module Replacement (HMR) at its simplest.

But What About node_modules? — esbuild-Powered Pre-Bundling

This isn't quite "Vite bundles nothing." build-tooling1-2's own point about dual CommonJS/ESM package builds matters here directly: many npm packages are still published as CommonJS, or as hundreds of small internal files — serving those raw would mean either syntax the browser can't run, or hundreds of separate network requests just to load one dependency, a real performance problem on its own.

Vite's actual answer is a genuine two-tier strategy: it uses esbuild (full mechanical explanation in build-tooling1-6) to pre-bundle just the node_modules dependencies — once, then cached — into a small number of larger, guaranteed-ESM-compatible files, before the dev server starts serving anything. Your own source code stays unbundled, served natively; your dependencies get one fast, one-time pre-bundling pass.

Rollup for Production — A Genuinely Different Tool

Vite's own "skip bundling" trick only works in development, relying on a browser fetching files in real time from a local dev server. That's entirely wrong for production: real users, over the real internet, need the fewest possible requests and the smallest possible payload — exactly web-vitals1's own performance concerns. For production builds, Vite switches to a completely different underlying tool: Rollup — a real, independent bundler, historically known for particularly clean ESM-focused output and effective tree-shaking.

Vite genuinely uses two different tools — esbuild for dev pre-bundling, Rollup for the production build — rather than being one unified bundler the way Webpack is. This is worth stating explicitly, since it's a common point of oversimplification.

Coding Challenges