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

Современные проекты используют сборщики (Webpack, Vite, Rollup) для обработки и оптимизации кода. Основные этапы:

1. Транспиляция – Babel преобразует современный JS в совместимый код
2. Бандлинг – объединение модулей в один/несколько файлов
3. Оптимизация – минификация, tree-shaking, сжатие изображений
4. Разделение кода – code splitting для ленивой загрузки

Пример конфига Vite:

// vite.config.js
export default {
  build: {
    outDir: 'dist',
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name]-[hash][extname]'
      }
    }
  }
}

Ключевые инструменты:

• Webpack – мощный, но сложный
• Vite – быстрый, современный (использует ES модули)
• Parcel – нулевая конфигурация