9. Production-сборка

Команда vite build создаёт оптимизированный production бандл с помощью Rollup. Понимание структуры вывода и стратегий чанкования поможет создавать более быстрые приложения.

Базовый build

# Production сборка
npm run build
# Эквивалентно: tsc && vite build

# Предпросмотр production версии локально
npm run preview
# Запускает статический сервер на dist/

Структура dist/

dist/
├── index.html              ← Входной HTML с инжектированными тегами
├── assets/
│   ├── index-BxS1p2qR.js   ← Main chunk (entry point)
│   ├── index-DtS3A2lQ.css  ← Extracted CSS
│   ├── vendor-abc12345.js  ← Vendor chunk (react, react-dom)
│   ├── LazyPage-xyz.js     ← Dynamic import chunk
│   └── logo-abc123.png     ← Хэшированные ресурсы
└── vite.svg                ← Из директории public/

build опции

vite.config.ts

export default defineConfig({
  build: {
    // Директория вывода (по умолчанию 'dist')
    outDir: 'dist',

    // Целевые браузеры/версии
    target: 'es2015',  // 'esnext' | 'es2015' | ['chrome87', 'safari13']

    // Минификатор
    minify: 'esbuild',   // 'esbuild' (быстро) | 'terser' (лучше, медленнее) | false

    // Source maps для debugging
    sourcemap: false,    // true | 'inline' | 'hidden'

    // Лимит для inline (base64) ресурсов в байтах
    assetsInlineLimit: 4096,

    // CSS Code Splitting
    cssCodeSplit: true,

    // Subdirectory для ресурсов (внутри outDir)
    assetsDir: 'assets',

    // Вывод сборки
    reportCompressedSize: true, // Показывать gzip размер

    // Chunk size warning (по умолчанию 500KB)
    chunkSizeWarningLimit: 500,
  },
})

target — Целевые браузеры

// Для современных браузеров
target: 'esnext'

// Для широкой поддержки
target: 'es2015'  // ES5 + необходимые полифиллы

// Конкретные браузеры (через browserslist)
target: ['chrome87', 'firefox78', 'safari13', 'edge88']

// Для Node.js SSR
target: 'node16'

// Legacy поддержка (IE11) — через @vitejs/plugin-legacy

Code Splitting стратегии

build: {
  rollupOptions: {
    output: {
      // Ручное разделение на чанки
      manualChunks: {
        // Vendor chunk — всё из react экосистемы
        'vendor-react': ['react', 'react-dom', 'react-router-dom'],

        // UI библиотека отдельно
        'vendor-ui': ['@mui/material', '@emotion/react'],

        // Утилиты отдельно
        'vendor-utils': ['lodash', 'date-fns', 'axios'],
      },

      // Или функция для динамического разделения
      manualChunks(id) {
        if (id.includes('node_modules')) {
          // Каждый пакет в отдельный чанк
          return id.toString().split('node_modules/')[1].split('/')[0]
        }
      },
    },
  },
}

Dynamic Import — автоматическое code splitting

// Автоматически создаёт отдельный чанк для страницы
const DashboardPage = lazy(() => import('./pages/Dashboard'))
const SettingsPage = lazy(() => import('./pages/Settings'))

// Vite автоматически сделает:
// dist/assets/Dashboard-abc123.js
// dist/assets/Settings-def456.js
// Загружаются ТОЛЬКО когда пользователь переходит на страницу

minify — Выбор минификатора

// esbuild (по умолчанию) — быстро, хорошее сжатие
minify: 'esbuild'

// terser — лучшее сжатие, в 20-40x медленнее
minify: 'terser'
// npm i -D terser  — нужно установить отдельно

build: {
  minify: 'terser',
  terserOptions: {
    compress: {
      drop_console: true,   // Удалить console.log в production!
      drop_debugger: true,
    },
  },
}

Ниже — интерактивный визуализатор структуры production сборки с симуляцией разных стратегий чанкования: