Как происходит сборка пакетов в frontend

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

Понимаете ли вы, что происходит между вашим import и файлом, который получает браузер, и можете ли объяснить, зачем современный проект вообще собирают.

Как отвечать

• Бандлер строит граф модулей от точек входа, прогоняет файлы через трансформеры (TypeScript, JSX, SCSS, ассеты), выбрасывает недостижимый код и раскладывает результат по чанкам с хешем в имени для долгого кэширования.
• Транспиляция сегодня определяется таргетами из browserslist, а не «переводом всего в ES5». Даунлевелинг до старого синтаксиса раздувает бандл и замедляет код: актуальные браузеры понимают классы, async/await и опциональную цепочку нативно.
• Инструменты: Vite (esbuild в деве, Rollup на сборке), Rollup для библиотек, esbuild и SWC вместо Babel, Webpack и Turbopack в крупных приложениях и в Next.js. UglifyJS давно мёртв и не понимает современный синтаксис, минифицируют Terser, esbuild или SWC.
• Tree shaking работает только для статических ESM-импортов и опирается на поле sideEffects в package.json. Из CommonJS и динамического require вытрясти лишнее нельзя.
• Код-сплиттинг делается через динамический import(): отдельный чанк на маршрут или на тяжёлую библиотеку. Плюс sourcemaps отдельными файлами и анализ размера бандла.
• Если вопрос про публикацию собственного пакета: сборка в ESM (при необходимости и в CJS), карта exports, декларации типов, React и подобное в peerDependencies.

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

Объясняют бандлинг только сокращением числа HTTP-запросов. При HTTP/2 это слабый аргумент, реальные причины: разрешение модулей, tree shaking, минификация и стабильные хеши для кэша.

Считают Webpack единственным вариантом и путают дев-сервер с продакшен-сборкой: у Vite это два разных конвейера.

Уверены, что Babel обязателен. При современных таргетах он часто не нужен вовсе, а TypeScript в сборке обычно только срезает типы, не проверяя их: проверка это отдельный запуск tsc --noEmit.

Путают dependencies и devDependencies в библиотеке и утаскивают React внутрь своего бандла, из-за чего в приложении оказывается две копии.