Understanding Vite’s Development Server, Plugin System, and Pre‑Bundling Mechanism

Vite is a modern frontend build tool whose biggest advantage over traditional bundlers like Webpack is its speed, achieved by not bundling files during development.

To create a Vite project you run npx create-vite , install the dependencies, and start the development server with npm run dev . The server launches a Connect‑based HTTP service that serves source files directly to the browser as ES modules.

In the development mode Vite serves main.tsx , App.tsx , and the React dependencies without bundling them; the browser loads them via type="module" script tags. The source files are compiled on demand, not pre‑bundled.

Vite’s dev server uses a series of middleware plugins to handle different file types. When a request for index.html arrives, Vite parses the HTML AST, finds all <script type="module"> tags, and pre‑compiles the referenced modules.

Each plugin exports a transform hook; for example, a CSS plugin compiles CSS, while the vite:esbuild plugin compiles TypeScript/JavaScript using esbuild and returns the transformed code and source map.

Because many npm packages are published as CommonJS, Vite performs a pre‑bundling step (deps‑optimize) that converts them to ESM and bundles each dependency into a single file under node_modules/.vite . This step is also powered by esbuild and dramatically reduces the number of network requests.

During pre‑bundling Vite scans all dependencies, flattens their paths (e.g., react-dom/client becomes react-dom_client ), and writes a _metadata.json file that stores hash values. The generated files are served with a max‑age cache header and a query string containing the hash, so browsers cache them aggressively while still being able to invalidate the cache when the hash changes.

When building for production, Vite switches to Rollup. Because Vite plugins are compatible with Rollup plugins, the same transformation logic used in development is applied during the production bundle, ensuring consistent output.

Vite also supports Hot Module Replacement (HMR). It watches file changes with chokidar , sends update messages over a WebSocket connection, and the browser replaces the affected module without a full reload.

In summary, Vite achieves its fast development experience by serving native ES modules, using esbuild for on‑the‑fly compilation and dependency pre‑bundling, caching pre‑bundled assets with hash‑based query strings, and reusing the same plugin system for both dev and production builds.