Какие бандлеры существуют и для чего они используются

Что проверяют

Понимаете ли вы, какую работу делает бандлер и почему она нужна даже при нативных ES-модулях в браузере. Следом обычно спрашивают, чем Vite отличается от webpack, или как устроены tree shaking и code splitting.

Как отвечать

Сначала задача. Бандлер строит граф зависимостей от точки входа и превращает сотни модулей в небольшое число оптимизированных файлов. По дороге он:

• транспилирует: TypeScript и JSX в JavaScript через Babel, SWC или esbuild;
• разрешает импорты: путь вида import React from 'react' браузер без подсказки не поймёт, а CommonJS-пакеты не умеет вовсе;
• делит код: динамический import() выносит экран в отдельный чанк, который грузится по требованию;
• выкидывает мёртвый код: tree shaking убирает неиспользуемые экспорты ES-модулей;
• готовит к кешу: минификация, хеш в имени файла, source maps;
• ускоряет разработку: dev-сервер и HMR, замена модуля без перезагрузки страницы.

Дальше инструменты:

• webpack: самый гибкий, лоадеры и плагины на всё. Цена: медленная сборка и многословный конфиг;
• Vite: в разработке отдаёт нативные ESM и пересобирает только изменённый файл, зависимости заранее собирает esbuild. Прод-сборку долго делал Rollup, новые версии переходят на Rolldown, бандлер на Rust;
• Rollup: стандарт для сборки библиотек, чистый вывод в ESM и CJS;
• esbuild: написан на Go, очень быстрый, часто работает внутри других инструментов;
• Rspack: совместим с API webpack, но написан на Rust, путь миграции для больших проектов;
• Turbopack: бандлер Next.js, в Next 16 включён по умолчанию;
• Parcel: нулевая конфигурация, подходит для небольших проектов.

Где спотыкаются

Говорят, что tree shaking есть только в Rollup. webpack тоже его делает в режиме production, но оба бессильны перед CommonJS и модулями с побочными эффектами, если в package.json нет sideEffects: false.

Путают бандлер с транспилятором или минификатором: Babel сам ничего не собирает.

Утверждают, что Vite в разработке и в проде работает одинаково. Отсюда редкие баги, которые видны только после сборки, поэтому результат проверяют через vite build и vite preview.