Что отвечает за сборку и объединение файлов в один бандл в проекте
Что проверяют
Знаете ли вы, что происходит между вашим исходником и файлом, который получает браузер. Вопрос простой на входе, но по ответу видно, разбирались ли вы со сборкой или только запускали готовую команду.
Как отвечать
За это отвечает сборщик модулей: он строит граф зависимостей от точки входа и выдаёт файлы для браузера. Живые инструменты: Vite, который в разработке отдаёт модули нативно, а прод собирает Rollup; сам Rollup для библиотек; webpack в больших проектах; esbuild, Parcel, Rspack, Turbopack.
Что делает сборщик кроме склейки:
- разрешает импорты, включая расширения, алиасы и пакеты из
node_modules; - прогоняет файлы через преобразователи: TypeScript и JSX, CSS-модули и препроцессоры, картинки и шрифты;
- делит результат на части: динамический
import()порождает отдельный чанк, общий код выносится, чтобы не приезжать дважды; - удаляет недостижимые экспорты, минифицирует, ставит хэш содержимого в имя файла ради долгого кэша;
- собирает карты исходников и следит за размером результата.
Важно развести роли: транспилятор вроде Babel или SWC превращает синтаксис, но бандл не строит; менеджер пакетов только ставит зависимости; сборщик соединяет всё это в артефакт.
Где спотыкаются
Называют инструмент и на этом заканчивают. Дальше спрашивают, зачем в имени файла хэш и почему код библиотек выносят отдельным чанком, и разговор останавливается.
Второе: считают, что цель это один файл. Сегодня наоборот: код делят на части и грузят по требованию, иначе первая страница тянет весь проект, а любая мелкая правка обнуляет кэш целиком.
Третье: верят в удаление лишнего кода как в магию. Оно работает на статических импортах, а пакет в старом модульном формате, побочные эффекты на верхнем уровне и импорт библиотеки целиком вместо конкретных функций легко оставляют её в сборке полностью. Проверяется это анализатором бандла, а не догадками.