Что такое Vite?

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

Проще всего:

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

---

Зачем нужен Vite

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

• медленный старт проекта

• долгая пересборка при изменениях

---

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

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

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

Он:

• запускает dev-сервер

• отдаёт файлы как ES-модули прямо в браузер

• пересобирает только изменённый файл

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

---

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

Vite:

• использует Rollup

• собирает оптимизированный бандл

• делает code-splitting, tree-shaking и т.п.

---

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

Старые сборщики	Vite
Собирают всё сразу	Сборка «по требованию»
Большой initial bundle	ES modules
Медленный HMR	Мгновенный HMR

---

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

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

---

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

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

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

---

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

• Vue 3 (по умолчанию)

• Nuxt 3

• React

• Svelte

• Vanilla JS

---

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

vite.config.ts
index.html
src/

Пример:

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

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

---

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

	Vite	Webpack
Скорость	⚡ очень быстро	🐢 медленно
Конфиг	простой	сложный
Современность	ES modules	legacy
Новый Vue	✅ стандарт	❌ почти не используют

---

Коротко

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