How does Vite use native ES modules?

In development mode, Vite does not bundle the project, but serves source files directly to the browser in the ES module (ESM) format. The browser itself loads dependencies via import, while Vite only intercepts and prepares these files on the fly.

---

#How it works, step by step

1. Source files stay as they are Files like .js, .jsx, .ts, .vue, and so on are served to the browser without being bundled beforehand.
2. The browser itself requests dependencies For example, if main.js has:

the browser makes a separate request to /app.js. 3. Vite rewrites imports on the fly If an npm package import is encountered:

Vite replaces it with a path to a pre-optimized version, for example:

4. esbuild transforms only what is needed JSX, TypeScript, and other formats are processed quickly, but only on request, not entirely, as in Webpack.

---

#What this gives you

---

#The essence in one phrase

Vite uses native ES modules as the loading system and dependency graph right in the browser, so it does not need to build the whole project during development, which radically speeds up the work.