# Что такое Vite?

**Vite** — это **инструмент для разработки и сборки фронтенд-приложений** (build tool), чаще всего для **Vue**, но не только.

Проще всего:

> **Vite = dev-сервер + сборщик**, который делает разработку **быстрой**.

---

## Зачем нужен Vite

Он решает главную боль старых сборщиков (Webpack):

- медленный старт проекта
- долгая пересборка при изменениях

---

## Как работает Vite (идея)

### 🔹 В режиме разработки

Vite **не собирает весь проект**.

Он:

- запускает dev-сервер
- отдаёт файлы **как ES-модули прямо в браузер**
- пересобирает **только изменённый файл**

👉 поэтому запуск и HMR почти мгновенные.

---

### 🔹 В продакшене

Vite:

- использует **Rollup**
- собирает оптимизированный бандл
- делает code-splitting, tree-shaking и т.п.

---

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

<table id="bkmrk-%D0%A1%D1%82%D0%B0%D1%80%D1%8B%D0%B5-%D1%81%D0%B1%D0%BE%D1%80%D1%89%D0%B8%D0%BA%D0%B8-vite"><thead><tr><th>Старые сборщики</th><th>Vite</th></tr></thead><tbody><tr><td>Собирают всё сразу</td><td>Сборка «по требованию»</td></tr><tr><td>Большой initial bundle</td><td>ES modules</td></tr><tr><td>Медленный HMR</td><td>Мгновенный HMR</td></tr></tbody></table>

---

## Что даёт Vite разработчику

✔ Мгновенный запуск (`npm run dev`)  
✔ Быстрый Hot Reload  
✔ Простая конфигурация  
✔ Отлично работает с Vue 3 и TypeScript  
✔ Современный стандарт де-факто

---

## Важная фича Vite (ты уже видел 👇)

```ts
import.meta.glob('./modules/**/*.ts')

```

👉 это **фича Vite**, не JavaScript и не Vue.

---

## Где используется Vite

- Vue 3 (по умолчанию)
- Nuxt 3
- React
- Svelte
- Vanilla JS

---

## Файлы Vite в проекте

```
vite.config.ts
index.html
src/

```

Пример:

```ts
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

```

---

## Vite vs Webpack (коротко)

<table id="bkmrk-%C2%A0-vite-webpack-%D0%A1%D0%BA%D0%BE%D1%80%D0%BE"><thead><tr><th> </th><th>Vite</th><th>Webpack</th></tr></thead><tbody><tr><td>Скорость</td><td>⚡ очень быстро</td><td>🐢 медленно</td></tr><tr><td>Конфиг</td><td>простой</td><td>сложный</td></tr><tr><td>Современность</td><td>ES modules</td><td>legacy</td></tr><tr><td>Новый Vue</td><td>✅ стандарт</td><td>❌ почти не используют</td></tr></tbody></table>

---

## Коротко

> **Vite** — современный инструмент сборки,  
> который делает разработку **быстрой и простой**.