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