TopolearnUnderstanding Vite's two modes explains nearly every behaviour difference between dev and build.
Older bundlers such as webpack build the whole application into bundles before the dev server can show anything, so start-up and updates slow down as the app grows. Vite (French for "fast") splits the problem in two:
- Development: the browser loads your code as native ES modules. Vite transforms each file on demand when the browser requests it (TypeScript, JSX, Vue SFCs, CSS), so start-up time barely depends on app size. Third-party dependencies are pre-bundled once into a few cached files, because packages like lodash-es would otherwise trigger hundreds of requests.
- Production: Vite bundles everything with Rolldown, a Rust bundler with a Rollup-compatible API (since Vite 8; earlier versions used esbuild plus Rollup), and minifies with Oxc and Lightning CSS. You get tree-shaken, code-split, content-hashed files.
On top of that, hot module replacement (HMR) swaps edited modules into the running page, preserving state, typically in milliseconds.
Start a project with npm create vite@latest, choosing a template (vanilla, React, Vue, Svelte, Solid, Lit, Preact, Qwik, each with or without TypeScript). Vite 8 requires Node 20.19+ or 22.12+.
Because dev and build use different pipelines, always test the production build (vite build then vite preview) before deploying.
Example
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
npm run dev
# VITE v8.x ready in 300 ms
# ➜ Local: http://localhost:5173/
npm run build # vite build -> dist/
npm run preview # serve dist/ locally on http://localhost:4173Remember
- Dev: native ESM, files transformed on demand
- Dependencies are pre-bundled and cached
- Production: bundled with Rolldown, minified with Oxc
- Always check
vite build+vite previewbefore deploying
Watch out for
- Assuming dev behaviour proves production works; the pipelines differ.