Что делает сборщик
Вопрос
Объясни, зачем фронтенд-проекту сборщик и что происходит с кодом от исходников до файлов в dist.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
граф зависимостей от точки входа
трансформация: TS, JSX, современный синтаксис, CSS
резолв пакетов из node_modules
склейка в чанки, минификация, tree shaking
хеши в именах для долгого кеша
dev-сервер с HMR и source maps
Что могут спросить следом
- Почему Vite в dev быстрее webpack?
- Почему ошибка типов не ломает сборку Vite?
- Как бы ты уменьшил размер бандла?
Разбор
Браузер не понимает TS и JSX, не знает, где искать react из голого импорта, и плохо грузит сотни мелких файлов. Сборщик решает это. Он начинает с точки входа, проходит по импортам и строит граф модулей, включая пакеты из node_modules. Каждый файл трансформируется: TS и JSX в JS, синтаксис под целевые браузеры, CSS через PostCSS. Потом модули склеиваются в чанки: неиспользуемые экспорты выбрасываются tree shaking, ленивые import() уходят в отдельные чанки, всё минифицируется. Файлам дают хеш содержимого в имени, чтобы ставить им вечный кеш. Плюс source maps для отладки.
В разработке важен dev-сервер: Vite отдаёт модули нативно и трансформирует по запросу, а при правке файла меняет только его через HMR.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.