Небольшой сайт из пары страниц вполне можно собрать вручную, просто подключив файлы стилей и скриптов напрямую в HTML. Но по мере роста проекта появляются задачи вроде объединения десятков файлов в один, сжатия кода перед публикацией и автоматической обработки изображений — здесь на помощь приходят сборщики.
Сборщик, в общих чертах, берёт множество исходных файлов проекта — стили, скрипты, изображения, шрифты — и превращает их в оптимизированный набор файлов, готовый к публикации на сервере. По пути он может сжимать код, объединять файлы, чтобы сократить количество запросов, и оптимизировать изображения.
Vite — один из популярных сегодня инструментов такого рода, известный в первую очередь скоростью работы во время разработки: изменения в коде отражаются в браузере почти мгновенно, без ожидания полной пересборки проекта, что заметно ускоряет сам процесс работы над вёрсткой.
Для CSS сборщики часто берут на себя автоматическое добавление вендорных префиксов под старые браузеры, объединение нескольких файлов стилей в один и минификацию — удаление пробелов и переносов строк, которые нужны человеку для чтения кода, но не нужны браузеру для его исполнения.
Для небольшого статичного сайта-визитки полноценный сборщик часто избыточен — простого подключения стилей и скриптов напрямую в HTML вполне достаточно. Сборщики раскрывают свою пользу именно на проектах, которые со временем разрастаются и требуют более системного подхода к организации файлов.
Знакомство с базовыми концепциями сборки фронтенда полезно даже тем, кто пока работает над простыми статичными страницами — рано или поздно эти инструменты встречаются практически в любом более крупном проекте.
Официальная документация с объяснением базовых концепций сборки доступна на сайте vitejs.dev.
