Спрощуємо Vite
Старі інструменти, такі як Webpack або Create React App, працюють шляхом попереднього збирання (bundling) усього вашого проєкту. Інструмент зчитує кожен файл і перетворює їх на один величезний JavaScript-файл. Це працює для малих проєктів. Але для великих проєктів цей підхід не підходить. У великих проєктах цей процес займає багато секунд. Щоразу, коли ви зберігаєте файл, інструмент має повторювати значну частину цієї роботи.
Vite працює інакше. Сучасні браузери підтримують ES-модулі нативно. Це означає, що браузер може самостійно обробляти імпорти та експорти. Vite не збирає ваш код у бандл під час розробки. Він надає кожен файл як окремий модуль лише тоді, коли браузер його запитує.
Уявіть ресторан із «шведським столом». Шеф-кухар готує кожну страву ще до відкриття дверей. Якщо ви захочете внести одну маленьку зміну, кухарю доведеться переробляти весь фуршет. Саме так працює Webpack. Чим більший проєкт, тим довше ви чекаєте.
Vite схожий на ресторан із меню a la carte. Двері відчиняються миттєво. Ви замовляєте одну страву. Кухар готує лише цю страву. Якщо пізніше ви захочете десерт, кухар приготує лише десерт. Вам не потрібно чекати, поки буде готове все меню.
Vite використовує дві різні стратегії для двох різних потреб:
Розробка (vite dev) • Стратегія: Надає нативні ESM-модулі без збирання (bundling). • Швидкість запуску: Миттєва. Вона не залежить від розміру проєкту. • Чому: Локальні HTTP-запити на вашому комп'ютері працюють швидко.
Продакшн (vite build) • Стратегія: Збирає все за допомогою Rolldown. • Швидкість запуску: Час зростає разом із розміром проєкту. • Чому: Сотні окремих файлів створюють занадто багато HTTP-запитів для користувачів. Збирання (bundling) вирішує цю проблему.
Vite забезпечує швидкість під час написання коду та ефективність під час запуску.
Джерело: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62