Vite Introduction: Features, Core Principles, and Plugin System

Vite is a next‑generation frontend build tool created by Evan You during the development of Vue 3.0, combining the concepts of Webpack and Webpack‑dev‑server while leveraging native browser ESM support to serve modules on demand without an initial bundle.

Key features include fast cold start using No Bundle + esbuild pre‑bundling, instant module hot‑module replacement (HMR) based on ESM, and true on‑demand loading that eliminates unnecessary bundling during development.

Compared with traditional bundlers, Vite launches a lightweight dev server that intercepts HTTP requests, resolves imports via the browser, and only bundles for production using Rollup, resulting in significantly faster development cycles than Webpack.

Vite also supports Snowpack‑style unbundled development but improves upon it by integrating Rollup for production builds, providing better tree‑shaking and scope hoisting.

Prerequisite knowledge such as ESM is explained: ESM is the standardized JavaScript module system supported by modern browsers, offering dynamic imports and real‑time binding, unlike older formats like CJS, AMD, or CMD.

Vite uses esbuild for rapid transformation of TypeScript, JSX, and JavaScript files, offering 10‑100× faster bundling than Webpack, and provides loaders, compression, tree‑shaking, and source‑map generation.

In production, Vite relies on Rollup, an ESM‑based bundler that produces smaller and faster bundles through efficient tree‑shaking and scope hoisting.

Core architecture includes an ESM‑based dev server, a WebSocket server for HMR, and a module graph that tracks dependencies. The dev server starts a Koa instance, intercepts module requests, and serves transformed code on demand.

HMR workflow: a WebSocket server is created, chokidar watches file changes, the server updates the module graph via moduleGraph.onFileChange , and handleHMRUpdate pushes update messages to the client, which then reloads only the affected modules.

Pre‑bundling with esbuild converts CommonJS dependencies to ESM and caches them in node_modules/.vite , reducing the number of HTTP requests (e.g., consolidating many lodash‑es imports into a single request).

Vite’s plugin system extends Rollup’s API, adding Vite‑specific hooks such as config , configResolved , configureServer , transformIndexHtml , and handleHotUpdate . Plugins can be ordered using the enforce property (pre, post) and can manipulate the build process at stages like buildStart , resolveId , load , transform , and buildEnd .

A simple custom plugin example is provided, showing how to define a plugin ID, implement hooks, and register it in vite.config.js .

Conclusion : Vite offers rapid cold starts, efficient HMR, and true on‑demand loading, making it a strong choice for modern frontend development, though its ecosystem is still growing and production builds rely on Rollup for optimal output.