Що таке Vite і як він працює? 🚀

Що таке Vite?

Vite – це сучасний інструмент для швидкої збірки фронтенд-проєктів. Він використовує ESM (ECMAScript Modules) у браузері, що дозволяє миттєво завантажувати модулі без необхідності їхньої попередньої компіляції.

📌 Основна ідея Vite – забезпечити миттєвий запуск та швидке оновлення коду під час розробки.

Як працює Vite?

Vite складається з двох основних частин:

Dev-сервер 🏎️ – миттєво запускає проєкт, використовуючи ESM (без бандлінгу).
Продакшн-збірка 📦 – використовує Rollup для оптимізації коду.

1. Миттєвий Dev-сервер (ESM)

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

🔹 Що це дає?

Швидке завантаження сторінки.
Миттєвий Hot Module Replacement (HMR) – зміни в коді видно без перезавантаження сторінки.

2. Оптимізована продакшн-збірка

Для продакшену Vite використовує Rollup, який:

Мінімізує код.
Розбиває файли для оптимальної продуктивності.
Додає Tree Shaking, щоб видалити непотрібний код.

Чому Vite швидший за Webpack?

Параметр	Vite	Webpack
Запуск проєкту	⚡ Миттєвий (ESM)	🐌 Повільний (бандлинг)
Гаряче оновлення (HMR)	🔥 Майже моментальне	❄ Повільне, особливо на великих проєктах
Продакшн-збірка	✅ Використовує Rollup	✅ Використовує Webpack
Підтримка модулів	📦 Працює напряму з ESM	🔄 Потрібна обробка файлів
Продуктивність	🚀 Швидший для великих проєктів	🐌 Повільніший, особливо при великій кількості файлів

Як встановити Vite?

Запусти команду:

npm create vite@latest my-project
cd my-project
npm install
npm run dev

Vite одразу запустить локальний сервер, який готовий до роботи. 🔥

Основні файли у Vite-проєкті

📌 `index.html`

Vite використовує HTML як основний файл входу, що дозволяє браузеру самостійно обробляти модулі.

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>Vite App</title>
</head>
<body>
    <script type="module" src="/main.js"></script>
</body>
</html>

📌 `main.js`

Оскільки Vite підтримує ES-модулі, імпортувати файли можна напряму:

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Основні можливості Vite

✅ Миттєвий старт без бандлінгу.
✅ ESM (ECMAScript Modules) підтримка.
✅ Гаряче оновлення (HMR) – зміни застосовуються миттєво.
✅ Підтримка Vue, React, Svelte та інших фреймворків.
✅ Гнучка конфігурація через vite.config.js.
✅ Ідеальна інтеграція з TypeScript.
✅ Продакшн-збірка через Rollup.

Конфігурація Vite (`vite.config.js`)

Vite підтримує налаштування через vite.config.js:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist',
    minify: 'terser'
  }
});

🔹 Що тут важливо?

plugins: [vue()] – підключає Vue.
server.port – змінює порт (за замовчуванням 5173).
build.outDir – папка для зібраного коду.
minify: 'terser' – мінімізує код.

Vite + Vue 3

Vite має вбудовану підтримку Vue 3. Щоб почати:

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

main.js для Vue 3 у Vite:

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

Vite + Quasar

Щоб використовувати Quasar у Vite:

npm create quasar@latest my-quasar-app
cd my-quasar-app
npm install
npm run dev

Quasar чудово працює з Vite, надаючи швидкий UI-фреймворк для Vue 3.

Переваги Vite

✅ Миттєвий запуск проєкту – не потрібно чекати бандлінгу.
✅ Швидке оновлення коду (HMR) – без перезавантаження сторінки.
✅ Проста інтеграція з Vue, React, Svelte.
✅ Використання сучасного ESM (ECMAScript Modules).
✅ Гнучке налаштування через vite.config.js.
✅ Оптимізована продакшн-збірка через Rollup.

Коли використовувати Vite?

Якщо потрібен швидкий старт проєкту.
Якщо використовуєш Vue, React, Svelte.
Якщо хочеш миттєве оновлення коду.
Якщо потрібна оптимізована продакшн-збірка.

Vite ідеально підходить для сучасної фронтенд-розробки. 🚀

Висновок

Vite – це нове покоління інструментів для розробки, яке забезпечує швидкість, ефективність і простоту. Він швидший, ніж Webpack, і дозволяє миттєво розгортати проєкти без довгого бандлінгу.

📌 Якщо ти працюєш з Vue 3, React або Quasar – Vite буде найкращим вибором! 🚀