Разбираемся с Vite
Старые инструменты, такие как Webpack или CRA, работают путем предварительной сборки всего вашего проекта. Они считывают каждый файл и объединяют их в один большой JavaScript-файл. Это подходит для небольших проектов, но не работает для крупных проектов с тысячами модулей. Сборка больших бандлов занимает секунды или даже минуты. Каждый раз, когда вы сохраняете файл, инструмент пересобирает значительные части бандла.
Vite работает иначе. Современные браузеры поддерживают ES modules нативно. Vite не собирает ваш код в бандл во время разработки. Он отдает каждый файл как отдельный модуль только тогда, когда этого запрашивает браузер.
Представьте себе ресторан формата «шведский стол». Повар готовит каждое блюдо еще до открытия дверей. Если вы захотите внести хотя бы одно небольшое изменение, повару придется переделывать почти весь стол. Вы долго ждете еду. Именно так работает Webpack.
А теперь представьте ресторан a la carte. Двери открываются мгновенно. Вы заказываете одно блюдо. Повар готовит только его. Если позже вы захотите десерт, повар приготовит только десерт. Вам не нужно ждать, пока будет приготовлено всё меню. Именно так работает Vite.
Vite использует две разные стратегии для двух разных задач:
Разработка (vite dev)
- Стратегия: Отдает нативные ESM-модули без сборки.
- Скорость: Мгновенно. Не зависит от размера проекта.
- Почему: Запросы по локальной сети выполняются быстро.
Продакшн (vite build)
- Стратегия: Собирает всё в бандл с помощью Rolldown.
- Скорость: Зависит от размера проекта.
- Почему: Сотни отдельных файлов создают слишком много HTTP-запросов для реальных пользователей. Сборка в бандл делает итоговый сайт быстрее для них.
Vite обеспечивает скорость во время написания кода и производительность при запуске.
Источник: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62