Зачем нужны бандлеры
↑ 6.2 Сборка и инфраструктура: Vite, monorepo, CI∕CD · → Следующая
Зачем это на собесе
«Что делает сборщик и почему нельзя просто подключить файлы?» — вопрос про основы современной разработки.
Объяснение
Бандлер строит граф зависимостей от точки входа и превращает исходники в оптимизированные артефакты для браузера.
| Задача | Как решает |
|---|---|
| Модули | склеивает import/export, npm-пакеты в бандлы/чанки |
| Транспиляция | TS/JSX/SFC → JS, современный синтаксис → целевые браузеры (Babel/esbuild/SWC) |
| Препроцессоры | SCSS/Less, PostCSS, автопрефиксы |
| Минификация | Terser/esbuild: короче код и имена |
| Tree shaking | удаление неиспользуемых экспортов |
| Code splitting | отдельные чанки для маршрутов и тяжёлых библиотек |
| Ассеты | изображения, шрифты, SVG: хэширование, встраивание малых файлов |
| Cache busting | имена с хэшем содержимого (app.3f9a1c.js) |
| Dev-сервер | HMR (горячая замена модулей), прокси, source maps |
| Окружения | import.meta.env, define |
| Полифиллы | по целевым браузерам (browserslist) |
Зачем это нужно, если есть нативные ES-модули: сотни модулей = сотни запросов; нет TS/SFC; npm-пакеты в формате CJS; нет минификации/хэширования; нужны браузеры-цели.
Инструменты: Vite (dev — нативные ESM + esbuild, prod — Rollup; сейчас Rolldown), webpack (гибкий, зрелый), Rollup (библиотеки), esbuild/SWC (скорость), Parcel, Turbopack, Rspack (webpack-совместимый на Rust).
Результат сборки: HTML + JS/CSS-чанки + ассеты + source maps + манифест.
Нюансы и подводные камни
- Размер бандла влияет на LCP/TTI: анализируйте (
rollup-plugin-visualizer). - Дублирование зависимостей (разные версии) раздувает бандл.
- Динамические импорты создают чанки, но не «бесплатны».
- Пакеты без
sideEffects: false/в CJS плохо tree-shake’ятся. - Разные окружения dev/prod ведут себя по-разному — проверяйте
vite preview.
Практика
- Соберите проект и изучите структуру
dist, размеры чанков. - Посмотрите граф бандла визуализатором.
- Сравните dev-сервер Vite и webpack по скорости холодного старта.
Вопросы с ответами
Зачем нужен бандлер, если есть ES-модули?
Оптимизация (минификация, tree shaking, разделение кода), поддержка TS/SFC/CSS-препроцессоров, npm-пакетов, хэширование и целевых браузеров.
Что такое tree shaking?
Удаление неиспользуемых экспортов на этапе сборки благодаря статическому анализу ES-модулей.