1. Что такое Vite

Vite — это инструмент разработки и сборки с двумя основными режимами работы: быстрый dev-сервер на базе Native ESM и оптимизированный production-бандл через Rollup.

Проблема, которую решает Vite

До Vite стандартным инструментом был Webpack (или CRA поверх него). Webpack появился ещё до того, как браузеры получили нативную поддержку ES Modules, поэтому он был вынужден собирать весь код в один файл перед запуском сервера.

Сегодня все современные браузеры поддерживают ES Modules нативно. Vite воспользовался этим и переосмыслил подход к разработке.

Два режима Vite

Dev режим: Native ESM

// vite.config.ts в dev режиме:
// Vite НЕ собирает ваш код.
// Браузер запрашивает модули по HTTP напрямую.

// В браузере выполняется:
// <script type="module" src="/src/main.tsx">
// main.tsx → import App from './App.tsx'
//          → Vite получает запрос к /src/App.tsx
//          → Трансформирует TSX → JS
//          → Отдаёт браузеру
// Обрабатывается ТОЛЬКО то, что нужно прямо сейчас

Pre-bundling зависимостей (esbuild)

Зависимости из node_modules — исключение. Vite pre-bundle их с помощью esbuild:

# Что делает esbuild при первом запуске:
# 1. Конвертирует CommonJS → ESM
#    (react, lodash и т.д. используют CJS)
# 2. Объединяет мелкие файлы (lodash имеет ~600 файлов!)
#    в один модуль для экономии HTTP-запросов
# 3. Кэширует результат в node_modules/.vite/deps/

.vite/
└── deps/
    ├── react.js
    ├── react-dom.js
    ├── react_jsx-runtime.js
    └── _metadata.json

Production: Rollup

В production Vite использует Rollup — зрелый и мощный бандлер:

// Rollup даёт:
// ✓ Глубокий tree-shaking (удаление неиспользуемого кода)
// ✓ Code splitting (разбивка на чанки)
// ✓ Dynamic import (ленивая загрузка)
// ✓ CSS extraction
// ✓ Asset optimization с хэшированием

Жизненный цикл запроса в dev-режиме

1. browser → GET /src/main.tsx
2. Vite middleware → finds file on disk
3. Transform pipeline:
   TypeScript → remove types
   JSX → React.createElement
   Imports → resolve paths
4. Response → browser executes module
5. browser → GET /src/App.tsx (from import in main.tsx)
6. Repeat for each import...

Вся эта цепочка занимает < 10ms на файл!

HMR (Hot Module Replacement)

Vite’s HMR принципиально отличается от Webpack:

Webpack HMR:
  Изменился файл → пересобрать весь бандл → reload

Vite HMR:
  Изменился файл → invalidate ТОЛЬКО этот модуль
              → отправить обновление через WebSocket
              → браузер заменяет ТОЛЬКО этот модуль
              → состояние приложения сохраняется!

Время обновления: <10ms независимо от размера проекта

Поддерживаемые технологии out-of-the-box

Технология	Поддержка
TypeScript	✓ (esbuild transpile)
JSX/TSX	✓ (esbuild/plugin)
CSS Modules	✓ нативно
PostCSS	✓ автоматически
JSON import	✓ нативно
Web Workers	✓ через ?worker
WASM	✓ через ?init
SVG	✓ как компонент

Архитектура плагинов

Vite расширяет Plugin API Rollup, добавляя Vite-специфичные хуки:

// Структура плагина Vite
export function myPlugin() {
  return {
    name: 'my-plugin',
    // Rollup хуки
    buildStart() { /* ... */ },
    transform(code, id) { /* ... */ },
    // Vite-специфичные хуки
    configureServer(server) { /* ... */ },
    handleHotUpdate(ctx) { /* ... */ },
  }
}

Ниже — анимированное сравнение процесса запуска dev-сервера Vite и Webpack с отображением каждого шага: