Упрощаем Vite
Старые инструменты, такие как Webpack или Create React App, работают по принципу предварительной сборки всего проекта. Инструмент считывает каждый файл и превращает их в один гигантский JavaScript-файл. Это подходит для небольших проектов, но не работает для крупных. В больших проектах этот процесс занимает много секунд. Каждый раз, когда вы сохраняете файл, инструменту приходится заново выполнять большую часть этой работы.
Vite работает иначе. Современные браузеры поддерживают ES-модули нативно. Это означает, что браузер может самостоятельно обрабатывать импорты и экспорты. Vite не собирает ваш код во время разработки. Он отдает каждый файл как отдельный модуль только тогда, когда этого запрашивает браузер.
Представьте себе ресторан со шведским столом. Повар готовит каждое блюдо еще до открытия дверей. Если вы захотите внести одно небольшое изменение, повару придется переделывать весь шведский стол. Именно так работает Webpack. Чем больше проект, тем дольше вы ждете.
Vite подобен ресторану с меню à la carte. Двери открываются мгновенно. Вы заказываете одно блюдо, и повар готовит только его. Если позже вы захотите десерт, повар приготовит только десерт. Вам не нужно ждать, пока будет готово всё меню.
Vite использует две разные стратегии для двух разных задач:
Разработка (vite dev) • Стратегия: Отдает нативные ESM-модули без сборки. • Скорость запуска: Мгновенно. Она не зависит от размера проекта. • Почему: Локальные HTTP-запросы на вашем компьютере выполняются быстро.
Продакшн (vite build) • Стратегия: Собирает всё воедино с помощью Rolldown. • Скорость сборки: Время увеличивается вместе с размером проекта. • Почему: Сотни отдельных файлов создают слишком много HTTP-запросов для пользователей. Сборка решает эту проблему.
Vite обеспечивает скорость во время написания кода и эффективность при запуске.
Источник: https://dev.to/yuripeixinho/descomplicando-o-vite-1p62