Understanding Vite’s Development Server Architecture and Pre‑bundling Mechanism

Vite is a modern build tool that is faster than webpack because it does not bundle in development.

In a Vite project you start by creating it with npx create-vite , install dependencies, and run the development server with npm install and npm run dev . The browser loads main.tsx and App.tsx together with React and React‑DOM as ES modules, compiled but not bundled.

The dev server serves files as type="module" scripts, letting the browser fetch each module directly.

Adding a simple index2.html that references a module aaa.js demonstrates how Vite serves modules on demand. The aaa.js file imports a function from bbb.js :

import { add } from './bbb.js'

console.log(add(1, 2))

and bbb.js exports the function:

export function add(a, b) {
  return a + b
}

Running a static server (e.g., npx http-server ) and opening http://localhost:8080/index2.html shows that both modules are fetched and executed.

Because the dev server does not bundle, Vite must still handle CommonJS dependencies and large numbers of modules (e.g., lodash‑es). It does this with a pre‑bundling step called “deps optimize”. When the dev server starts, Vite scans node_modules with esbuild, bundles each dependency into a single ES module, writes the result to node_modules/.vite , and generates a _metadata.json containing hash values.

The generated files are served with a query string containing the hash and a long max‑age cache header, so they are strongly cached until the hash changes (e.g., after a lock‑file or config change).

During development Vite uses a Connect‑based server with many middle‑wares. When an HTML file is requested, Vite parses its AST, finds all script tags, and pre‑compiles the referenced modules using plugins. Plugins expose a transform hook; for example, a CSS plugin processes CSS and an esbuild plugin processes TS/JS.

Vite’s plugin system is compatible with Rollup plugins, allowing the same plugins to run in the dev server and in the production build, which uses Rollup for bundling.

Hot Module Replacement (HMR) is implemented with chokidar watching file changes, sending update messages over a WebSocket, and the browser reloading the affected module with a timestamped request.

In summary, Vite’s dev workflow relies on serving native ES modules, on‑demand compilation, fast esbuild‑based pre‑bundling of dependencies, hash‑based caching, a unified plugin system with Rollup, and WebSocket‑driven HMR.