Suggest an edit

Improve this article

Refine the answer for “How does Vite use native ES modules?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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:

```js
  import { createApp } from './app.js';
  ```
the browser makes a separate request to `/app.js`.
3. **Vite rewrites imports on the fly**
If an npm package import is encountered:

```js
  import React from 'react';
  ```
Vite replaces it with a path to a pre-optimized version, for example:

```javascript
  /@modules/react
  ```
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

| Mechanism | Effect |
|---|---|
| Native ES modules in the browser | No initial bundling |
| Requesting only the needed modules | Fast server start |
| Transformation on demand | Instant HMR |

---

### 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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts244 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.