Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Як Vite використовує нативні ES-модулі?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Vite в режимі розробки **не збирає проєкт у бандл**, а віддає вихідні файли напряму в браузер у форматі **ES-модулів (ESM)**. Браузер сам завантажує залежності через `import`, а Vite лише перехоплює і готує ці файли на льоту.

---

### Як це працює по кроках

1. **Вихідники лишаються як є**
Файли `.js`, `.jsx`, `.ts`, `.vue` тощо віддаються браузеру без попереднього об'єднання в бандл.
2. **Браузер сам запитує залежності**
Наприклад, якщо в `main.js` є:

```js
  import { createApp } from './app.js';
  ```
браузер робить окремий запит до `/app.js`.
3. **Vite переписує імпорти на льоту**
Якщо трапляється імпорт npm-пакета:

```js
  import React from 'react';
  ```
Vite підміняє його на шлях до попередньо оптимізованої версії, наприклад:

```javascript
  /@modules/react
  ```
4. **esbuild трансформує тільки те, що потрібно**
JSX, TypeScript та інші формати обробляються швидко, але **тільки за запитом**, а не цілком, як у Webpack.

---

### Що це дає

| Механізм | Ефект |
|---|---|
| Нативні ES-модулі в браузері | Немає початкового бандлінгу |
| Запит тільки потрібних модулів | Швидкий старт сервера |
| Трансформація за вимогою | Миттєвий HMR |

---

### Суть в одній фразі

Vite використовує нативні ES-модулі як систему завантаження і граф залежностей прямо в браузері, тому йому не потрібно збирати проєкт цілком під час розробки, що радикально прискорює роботу.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати210 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.