Как организована сборка приложения?

Сборка приложения организуется через бандлер (Vite/Webpack), который берёт исходники, разрешает зависимости, транспилирует, оптимизирует и создаёт готовые файлы для деплоя.

Этапы сборки

1. Точка входа — бандлер строит граф зависимостей от src/index.
2. Трансформация — транспиляция (Babel/TS → совместимый JS), обработка JSX, CSS-модулей, импорта ассетов.
3. Бандлинг — объединение модулей в чанки.
4. Оптимизация — минификация, tree shaking (удаление мёртвого кода), code splitting.
5. Вывод — готовые файлы в dist/ с хешами в именах (для кеширования).

src/ → [Vite/Webpack] → dist/ (bundle.[hash].js, style.[hash].css, index.html)

Механизмы

• Code splitting — разбиение по маршрутам, ленивая загрузка.
• Tree shaking — убрать неиспользуемые экспорты.
• Хеширование — имена файлов с хешом → надёжное кеширование.
• Env-переменные — разные конфиги для dev/prod.
• Source maps — для отладки минифицированного кода.

Dev против Prod

• Dev — быстрый пересбор, HMR, source maps, без минификации.
• Prod — минификация, оптимизации, хеши, разбиение чанков.

Инструменты

Vite (быстрый, с Vite 8 — Rolldown, раньше esbuild/Rollup), Webpack (гибкий), Rollup (библиотеки), esbuild.

Коротко для собеседования

Сборка: бандлер (Vite/Webpack) строит граф зависимостей от входа, транспилирует (Babel/TS, JSX, CSS), объединяет в чанки, оптимизирует (минификация, tree shaking, code splitting) и выдаёт файлы с хешами в dist/. Dev-режим — HMR и source maps, prod — минификация и оптимизации.