Как происходит билд в JavaScript/TypeScript проектах

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

Понимаете ли вы, что происходит между npm run build и файлами в dist, и сможете ли разобраться, когда сборка ломается или бандл раздувается. Следом часто спрашивают, чем Vite отличается от Webpack и проверяет ли сборка типы.

Как отвечать

Пройдите по этапам:

• граф модулей: бандлер стартует с точек входа, разрешает import через node_modules, алиасы и поле exports в package.json, строит граф зависимостей;
• трансформация: TypeScript и JSX превращаются в JavaScript. В современных сборках это делают esbuild, SWC или Babel, и они просто вырезают типы, файл за файлом. Поэтому в tsconfig.json включают isolatedModules, а типы проверяют отдельно через tsc --noEmit;
• tree shaking: удаление неиспользуемых экспортов. Работает на ES-модулях, а поле sideEffects в package.json подсказывает, какие файлы можно выбросить целиком;
• code splitting: каждый динамический import() становится отдельным чанком, общий код выносится в свои чанки;
• оптимизация: минификация (Terser, esbuild, SWC), хеш в имени файла для долгого кеширования, source maps, обработка CSS через PostCSS, подстановка process.env.NODE_ENV и import.meta.env на этапе сборки.

Назовите инструменты, с которыми работали. Vite в разработке отдаёт нативные ES-модули, прод собирает через Rollup, а в новых версиях переходит на Rolldown. Next.js в последних версиях по умолчанию собирает на Turbopack. Webpack остаётся во многих существующих проектах. Для библиотек отдельно генерируются декларации .d.ts, часто через tsup или сам tsc.

Если настраивали сборку сами, расскажите, что улучшили: например, анализ бандла показал тяжёлую библиотеку дат, и её заменили или вынесли в ленивый чанк.

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

Включают тесты в этапы сборки. Тесты и линт это шаги CI, а сборка отвечает за превращение исходников в артефакт.

Уверены, что Vite или esbuild ловят ошибки типов. Бандл соберётся и с ошибкой типов, если tsc не запущен отдельно.

Кладут секреты в переменные окружения фронтенда. Всё, что подставлено в бандл, видно любому пользователю в браузере.