Vite: Обзор

Vite (произносится «вит», от французского «быстро») — инструмент сборки нового поколения, который радикально улучшает опыт frontend-разработки. Создан Эваном Ю (автором Vue.js) в 2020 году и с тех пор стал стандартом для новых проектов.

Почему Vite такой быстрый?

Традиционные сборщики вроде Webpack перед запуском dev-сервера должны обойти весь граф зависимостей, связать все модули в один бандл и только потом запустить сервер. При больших проектах это занимает десятки секунд.

Vite использует принципиально другой подход:

1. Native ESM в браузере

В dev-режиме Vite не собирает код. Вместо этого он использует нативную поддержку ES Modules в современных браузерах. Браузер сам запрашивает только нужные модули:

Webpack: src/* → [bundle всего] → bundle.js → браузер

Vite:    src/index.ts → браузер → [запрос /src/App.tsx] → Vite → трансформация → браузер

2. Pre-bundling зависимостей с esbuild

Зависимости из node_modules обрабатываются через esbuild — сборщик на Go, который работает в 10–100× быстрее JavaScript-аналогов. Это происходит один раз при первом запуске.

3. On-demand трансформации

Vite трансформирует файлы по требованию — только тот модуль, который запросил браузер. Если у вас 500 компонентов, но открыта только главная страница, Vite обработает лишь те модули, которые она использует.

Архитектура: dev vs production

Dev Server (Native ESM):
┌──────────────────────────────────────┐
│  esbuild → pre-bundle node_modules   │
│  Koa server → on-demand transforms   │
│  WebSocket → HMR updates             │
└──────────────────────────────────────┘

Production Build (Rollup):
┌──────────────────────────────────────┐
│  Rollup → tree-shaking               │
│  Code splitting → lazy chunks        │
│  Asset optimization → hashing        │
└──────────────────────────────────────┘

Сравнение с Webpack

Характеристика	Vite	Webpack
Холодный старт	~50ms	~30s
HMR обновление	<10ms	1–5s
Dev режим	Native ESM	Bundled JS
Конфигурация	Минимальная	Объёмная
Production	Rollup	Webpack

Когда использовать Vite?

Vite идеально подходит для:

• SPA с React, Vue, Svelte, Lit
• Библиотек компонентов (library mode)
• Новых проектов — замена CRA, Vue CLI
• Команд, ценящих скорость разработки

Vite менее подходит если у вас очень специфические webpack-плагины без аналогов, или legacy CommonJS код, не совместимый с ESM.

Экосистема

# Официальные плагины
@vitejs/plugin-react        # React + Fast Refresh
@vitejs/plugin-vue          # Vue 3 SFC
@vitejs/plugin-svelte       # Svelte

# Тестирование
vitest                      # Unit тесты на базе Vite

# Мета-фреймворки
vite (core)
├── Nuxt 3
├── SvelteKit
├── Astro
├── Remix (vite mode)
└── Qwik City

Ниже — интерактивная демонстрация, показывающая ключевые преимущества Vite и симуляцию скорости холодного старта по сравнению с Webpack: