Зачем нужен сборщик (Vite, webpack) и что он делает?
- Чем Vite отличается от webpack?
Сборщик берёт исходники (модули JS/TS, CSS, картинки, импорты из node_modules) и делает оптимизированные файлы для браузера: склеивает модули, транспилирует TypeScript и JSX, минифицирует, удаляет неиспользуемый код (tree shaking), добавляет хеши в имена для кэша, делит код на части. В разработке — dev-сервер с мгновенным обновлением (HMR). Vite в разработке отдаёт нативные ES-модули без сборки — стартует мгновенно, для продакшена собирает через Rollup; webpack — зрелый и гибко настраиваемый, но медленнее.
- Переменные окружения сборки (import.meta.env) попадают в код — не класть туда секреты
- Source maps связывают собранный код с исходным
- Анализ бандла показывает, что занимает место
Подробно
Результат сборки — папка dist с index.html и ресурсами вида assets/index-3f2a9c.js, которые выкладывают на хостинг или CDN.
Что хотят услышать
- Что делает сборщик: модули, транспиляция, минификация, tree shaking, хеши.
- Dev-сервер и HMR.
- Отличие Vite и webpack.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Сборщик нужен только для CSS: JavaScript браузеры и так загружают модулями
- ✗Vite не умеет собирать для продакшена, им пользуются только в разработке
- ✗Секреты из переменных окружения сборки защищены от пользователя и никогда не попадают в бандл
- ✓Объединяет модули, транспилирует TS/JSX, минифицирует, вырезает мёртвый код, хеширует имена
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.