Что такое Vite?

2.0 Middle🔥 222 комментариев

#JavaScript Core

Комментарии (2)

🐱

claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Что такое Vite

Краткий ответ: Vite - это современный сборщик проектов (build tool) и dev-сервер для веб-приложений, который обеспечивает молниеносно быструю разработку благодаря использованию нативных ES модулей и оптимизированной сборке для production.

История и назначение

Vite (французский "быстро") был создан Эваном Ю (автор Vue.js) в 2020 году для решения проблем существующих сборщиков:

Webpack - медленный холодный старт проекта
Parcel - медленное обновление при изменении файлов
Gulp, Grunt - устаревшие подходы

Vite использует современные возможности браузеров для ускорения разработки.

Ключевое отличие: ES модули вместо бандлинга

Старый подход (Webpack):

Все файлы -> Webpack -> Один большой бандл -> Браузер

Проблемы:
- Холодный старт: 10-30 секунд
- Изменение файла -> перебундлирование всего -> HMR 3+ сек

Новый подход (Vite):

Development режим (на лету):
- Исходные .js файлы -> Браузер как ES модули
- Браузер сам грузит нужные модули
- Холодный старт: 100-300 миллисекунд!
- Изменение файла -> обновление только этого модуля -> HMR мгновенно

Production режим:
- Оптимизированный бандл через Rollup

Как работает Vite в development

// app.js
import { sum } from './math.js'
console.log(sum(1, 2))

// math.js
export function sum(a, b) {
  return a + b
}

Браузер видит:
<script type="module" src="/src/app.js"></script>

Браузер запрашивает /src/app.js
Vite сервер возвращает app.js как есть
App.js импортирует math.js
Браузер запрашивает /src/math.js
Vite сервер возвращает math.js как есть

Всё работает в браузере как модули!

Установка и базовое использование

# Создать новый проект Vite
npm create vite@latest my-app -- --template react
# или для Vue
npm create vite@latest my-app -- --template vue
# или для React + TypeScript
npm create vite@latest my-app -- --template react-ts

# Войти в папку проекта
cd my-app

# Установить зависимости
npm install

# Запустить dev сервер
npm run dev

# Собрать для production
npm run build

# Просмотреть production сборку локально
npm run preview

Структура проекта Vite

my-vite-app/
├── index.html           # Точка входа (не src!)
├── vite.config.js       # Конфиг Vite
├── package.json
├── src/
│   ├── main.js          # Точка входа JavaScript
│   ├── App.jsx          # Главный компонент
│   ├── style.css        # Стили
│   └── components/      # Компоненты
├── public/              # Статические файлы
└── dist/                # Сборка (после build)

Файл конфигурации Vite

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  
  server: {
    port: 3000,
    strictPort: false,
  },
  
  build: {
    outDir: 'dist',
    sourcemap: false, // для production отключаем sourcemaps
  },
  
  resolve: {
    alias: {
      '@': '/src', // удобные импорты
    }
  }
})

Практический пример проекта

// src/App.jsx
import { useState } from 'react'
import './App.css'

export function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="app">
      <h1>Vite + React</h1>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
    </div>
  )
}

// src/main.js
import { createRoot } from 'react-dom/client'
import { App } from './App'
import './index.css'

createRoot(document.getElementById('root')).render(<App />)

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- Vite автоматически добавляет скрипт -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Преимущества Vite

Скорость разработки:

Холодный старт: 100-300ms (вместо 10+ секунд у Webpack)
HMR (Hot Module Replacement): мгновенно обновляет изменённый модуль
Нет ненужной перекомпиляции

# Скорость сравнения:
Webpack: npm run dev -> 15 секунд
Vite:    npm run dev -> 300 миллисекунд

Оптимизация для production:

Использует Rollup (проверенный бандлер)
Автоматическая минификация
CSS splitting
Tree shaking (удаление мёртвого кода)

Встроенная поддержка:

CSS препроцессоры (SCSS, Less, Stylus)
TypeScript (из коробки)
JSX (React, Preact)
Vue Single File Components
Webassembly

Сравнение с другими инструментами

Инструмент	Холодный старт	HMR	Production	Популярность
Vite	100-300ms	мгновенно	Отличная	Растет быстро
Webpack	10-30s	2-5s	Очень хорошая	Бизнес (CRA, Next)
Turbopack	100ms	мгновенно	Хорошая	Next.js 13+
esbuild	Очень быстро	Нет встроенного	Быстрая	Специализированный
Parcel	2-5s	1-2s	Хорошая	Убывает

Плагины Vite

// vite.config.js с плагинами
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    react(),
    vue(),
    // Кастомный плагин
    {
      name: 'my-plugin',
      resolveId(id) {
        if (id === 'my-module') {
          return id
        }
      }
    }
  ]
})

Типичный workflow разработки с Vite

# 1. Запустить dev сервер
npm run dev
# -> Браузер на http://localhost:5173

# 2. Разрабатывать - изменения обновляются мгновенно
# -> Отредактировал App.jsx -> сразу видишь изменения

# 3. Когда готово - собрать для production
npm run build
# -> Создаёт оптимизированную папку dist/

# 4. Протестировать production сборку локально
npm run preview
# -> http://localhost:4173 с production бандлом

# 5. Задеплоить dist/ на сервер
# -> Скопировать содержимое dist/ на веб-сервер (Netlify, Vercel, etc)

Развёртывание Vite приложения

// vite.config.js для разных окружений
export default defineConfig({
  define: {
    __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
    __API_URL__: JSON.stringify(
      process.env.NODE_ENV === 'production'
        ? 'https://api.myapp.com'
        : 'http://localhost:3001'
    )
  }
})

# Development
npm run dev

# Production build
npm run build

# Результат dist/ можно залить на:
# - Netlify (автоматический CI/CD)
# - Vercel (для Next.js-подобных проектов)
# - GitHub Pages
# - Собственный сервер (через nginx/apache)
# - Docker контейнер

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

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

Новые React/Vue/SvelteKit проекты
Single Page Applications (SPA)
Когда скорость разработки важна
Когда вы готовы использовать moderne tooling

Менее подходит для:

Legacy проекты с CRA (лучше мигрировать постепенно)
Если нужна специфическая поддержка Webpack плагинов
Server-side rendering без правильной настройки

Вывод

Vite - это революционный сборщик для современной веб-разработки. Используя нативные ES модули для разработки и Rollup для production, он достигает невероятной скорости. Холодный старт за 100ms вместо 10+ секунд, мгновенное обновление модулей (HMR), встроенная поддержка всех популярных фреймворков - всё это делает Vite идеальным выбором для новых проектов. Я активно использую его в своих проектах и очень доволен производительностью разработки.