Что такое Vite?

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

Проще всего:

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

Зачем нужен Vite

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

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

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

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

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

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

Он:

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

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

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

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

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

Vite:

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

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

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

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

Что даёт 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 — современный инструмент сборки,
который делает разработку быстрой и простой.