Vite starts fast because it does not bundle your app before serving it. A bundler such as webpack builds the whole application first, so the larger the app, the longer the wait.
Vite splits the work in two:
Dependencies from node_modules rarely change. Vite pre-bundles them once with Rolldown, a fast bundler written in Rust. Each package becomes a single module, cached until the lockfile changes.
Source code is served as native ES modules. The browser requests each file through import statements, and Vite compiles a file only when the browser asks for it.
So the dev server starts almost instantly, even for large applications. Hot Module Replacement (HMR) stays fast for the same reason: an edit updates just that module, with no rebuild. The trade-off is request count, since a very large codebase can load pages slowly in development.
Rewriting in plainer words…
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The diagram below the answer is the concept .
Jump to it ↓
Tailored explanation · switch back to · ·
What should the new diagram focus on?
See it - interactive diagram
When the dev server is ready: webpack vs Vite
webpack
build whole app
serve first page
Vite server
start server
Vite deps
pre-bundle deps
Vite source
compile main.js
compile App.js
compile Header.js
Vite ready
deps cached
Vite page loaded
webpack ready
webpack:build whole app- It builds every module first. Bigger apps wait longer.
Vite server:start server- It does not bundle your source first, so it is ready at once.
Vite deps:pre-bundle deps- Rolldown, a Rust bundler, makes each package one module.
Vite ready- The browser can ask for the page right away.
Vite source:compile main.js- Vite compiles it only when the browser asks for it.
deps cached- Vite caches the result until the lockfile changes.
Vite source:compile App.js- main.js imports it, so the browser asks for it next.
Vite source:compile Header.js- Each import adds one request, so big apps can load slowly.
Vite page loaded- Files this page never imports were never compiled.
webpack ready- The first request had to wait for the whole bundle.
webpack:serve first page- Only now can it answer the browser.
1step
Webpack: build whole app. It builds every module first. Bigger apps wait longer.
1 / 11← → keys
webpack builds the whole app before it can answer, so the wait grows with app size. Vite answers at once and compiles each file only when the browser asks.
