Skip to main content

Як Vite використовує нативні ES-модулі?

Frontend-інструментиJunior~1 хв читання
Запропонувати правку

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
  1. esbuild трансформує тільки те, що потрібно JSX, TypeScript та інші формати обробляються швидко, але тільки за запитом, а не цілком, як у Webpack.

Що це дає

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

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

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

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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