Сборка и подготовка к деплою

Процесс сборки в Vite основан на использовании Rollup как основного бандлера для production-сборки, при этом сам Vite в режиме разработки использует нативные ES-модули браузера и esbuild для трансформаций. Команда vite build запускает финальную оптимизацию приложения, включая объединение модулей, минификацию, разделение кода и подготовку статических ресурсов для деплоя.

При выполнении сборки Vite формирует директорию dist, которая становится готовым артефактом для размещения на любом статическом или серверном хостинге.

Основные этапы сборки:

  • анализ графа зависимостей приложения;
  • трансформация модулей через Rollup;
  • оптимизация JavaScript и CSS;
  • генерация хешированных файлов для кэширования;
  • обработка статических ресурсов (изображений, шрифтов и т.д.).

Конфигурация production-сборки

Поведение сборки управляется через секцию build в файле vite.config.js.

export default {
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false,
    minify: 'esbuild'
  }
}

Основные параметры build

outDir Директория, в которую будет помещён результат сборки. По умолчанию dist.

assetsDir Поддиректория внутри outDir, куда складываются ассеты.

sourcemap Включение source maps. Используется для отладки production-кода.

minify Определяет инструмент минификации:

  • esbuild — быстрый вариант (по умолчанию)
  • terser — более гибкий и совместимый
  • false — отключение минификации

Управление базовым путём (base)

При деплое на подкаталоги важно корректно задать базовый путь:

export default {
  base: '/app/'
}

Этот параметр влияет на:

  • пути к JS и CSS файлам;
  • загрузку статических ресурсов;
  • работу SPA-роутера.

Для CDN или корневого деплоя используется:

base: '/'

Обработка статических ресурсов

Vite автоматически обрабатывает импортируемые ассеты:

import logo from './assets/logo.png'

В production-сборке:

  • изображения хешируются;
  • маленькие файлы могут инлайниться в base64;
  • крупные файлы выносятся в assets/.

Настройка лимита инлайна:

export default {
  build: {
    assetsInlineLimit: 4096
  }
}

Файлы меньше указанного значения в байтах будут встроены в код.

Разделение кода (Code Splitting)

Vite автоматически применяет code splitting через Rollup. Разделение происходит:

  • по динамическим импортам;
  • по общим зависимостям;
  • по vendor-библиотекам.

Пример динамического импорта:

const module = await import('./module.js')

Такой подход создаёт отдельный chunk, который загружается по требованию.

Дополнительно можно управлять чанками:

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
}

Минификация и оптимизация

Vite выполняет несколько уровней оптимизации:

JavaScript

Используется esbuild или terser:

  • удаление комментариев;
  • сокращение идентификаторов;
  • tree-shaking неиспользуемого кода.

CSS

  • удаление неиспользуемых правил;
  • минификация селекторов;
  • объединение файлов.

HTML (при использовании плагинов)

  • удаление лишних пробелов;
  • оптимизация ссылок на ассеты.

Переменные окружения в сборке

Vite поддерживает переменные окружения через .env файлы:

  • .env
  • .env.production
  • .env.local

Доступ в коде:

console.log(import.meta.env.VITE_API_URL)

Важно:

  • доступны только переменные с префиксом VITE_;
  • значения подставляются на этапе сборки;
  • после сборки значения становятся статичными.

Preview production-сборки

После выполнения vite build можно запустить локальный сервер для проверки результата:

vite preview

Это позволяет:

  • проверить маршрутизацию SPA;
  • протестировать загрузку ассетов;
  • выявить ошибки сборки до деплоя.

Сервер preview не предназначен для production-использования, но точно имитирует поведение статического хостинга.

Деплой на статический хостинг

Общий принцип

Результат сборки Vite — это набор статических файлов. Деплой сводится к загрузке содержимого dist на сервер.

Деплой на Nginx

Типичная конфигурация:

server {
  listen 80;
  server_name example.com;

  root /var/www/app/dist;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

Ключевой момент — поддержка SPA-роутинга через try_files.

Деплой на GitHub Pages

При использовании GitHub Pages важно задать base:

base: '/repo-name/'

Сборка:

vite build

Далее содержимое dist публикуется в ветку gh-pages.

Деплой на Vercel и Netlify

Для серверов без ручной конфигурации достаточно:

  • указать build command: vite build
  • указать output directory: dist

Дополнительно:

Netlify SPA fallback

Файл _redirects:

/* /index.html 200

Docker-сборка

Многоступенчатая сборка:

FROM node:20 AS build
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html

Подход позволяет:

  • минимизировать размер образа;
  • отделить билд от runtime;
  • обеспечить воспроизводимость.

Оптимизация итогового бандла

Ключевые методы уменьшения размера сборки:

  • использование динамических импортов;
  • исключение неиспользуемых зависимостей;
  • анализ bundle через rollup-plugin-visualizer;
  • замена тяжёлых библиотек на модульные аналоги;
  • включение tree-shaking.

Работа с legacy-браузерами

При необходимости поддержки старых браузеров используется плагин:

import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
}

Плагин создаёт дополнительный bundle с транспиляцией.

Предсборочная проверка проекта

Перед сборкой обычно учитываются:

  • корректность импортов;
  • отсутствие runtime-ошибок;
  • соответствие переменных окружения;
  • наличие необходимых ассетов;
  • корректность маршрутов SPA.

Vite не выполняет строгую типизацию на этапе build, поэтому ответственность за это лежит на инструментальной цепочке (TypeScript, ESLint, CI).

Rollup расширения в Vite

Vite позволяет расширять процесс сборки через Rollup:

export default {
  build: {
    rollupOptions: {
      external: ['some-lib'],
      output: {
        globals: {
          'some-lib': 'SomeLib'
        }
      }
    }
  }
}

Это используется при:

  • создании библиотек;
  • интеграции с внешними CDN;
  • гибком управлении зависимостями.

Сборка библиотек

Vite может использоваться не только для приложений, но и для библиотек:

export default {
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'MyLib',
      fileName: 'my-lib'
    }
  }
}

Результат:

  • ESM сборка;
  • CJS (при необходимости);
  • UMD (для старых интеграций).

Хеширование файлов и кеширование

Vite добавляет content hash к именам файлов:

app.3f2a1c.js
style.91bc22.css

Это обеспечивает:

  • долгосрочное кеширование;
  • автоматическое обновление при изменениях;
  • снижение нагрузки на CDN.

Итоговая структура dist

Типичная структура:

dist/
  assets/
    index.3f2a1c.js
    vendor.8ac91d.js
    index.91bc22.css
  index.html

index.html содержит ссылки на хешированные ресурсы, что делает сборку полностью автономной.

Оглавление