sottoVite — стандарт для новых проектов: в разработке отдаёт ES-модули браузеру почти без сборки (мгновенный старт и горячая перезагрузка), для продакшена собирает оптимизированный бандл. webpack — гибкий сборщик, который встречается в большом числе существующих проектов. Новое поколение — Rspack, Rolldown, Turbopack — написано на Rust ради скорости.
Что важно знать
- Tree shaking — удаление неиспользуемого кода; работает с ES-модулями и без побочных эффектов при импорте.
- Разделение кода (code splitting) — отдельные файлы для маршрутов и тяжёлых библиотек через
import(). - Хеш в имени (
index-4f2a9c.js) — файлы можно кэшировать навсегда, новая сборка даёт новые имена. - Минификация и source maps — для отладки продакшен-кода.
- Переменные окружения на этапе сборки попадают в бандл открытым текстом — секретам там не место.
- Анализ размера:
rollup-plugin-visualizer,source-map-explorer— найти, какая библиотека раздула бандл. - Транспиляция (esbuild, SWC, Babel) — синтаксис под нужные браузеры.