Vite: production-ориентированный vite.config.ts (2026)

Нужен минимальный и достаточный конфиг Vite для продакшн-сборки: ESM, TypeScript, алиасы, целевой браузер, sourcemap и порты dev/preview. Проблема: лишние или устаревшие опции, нестабильный API; размытая цель сборки и лишние sourcemap в проде. Симптомы: сборка под старые браузеры без необходимости, тяжёлые .map в бандле, неудобные импорты без алиасов. Ниже — конфиг на официальном API (vite.dev/config): resolve.alias, build.target, sourcemap, порты; когда достаточно такого конфига, когда расширять; проверка сборки и preview.

Решение

Конфиг использует только официальный API Vite, без экспериментальных опций.

import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { defineConfig } from 'vite';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },

  server: {
    port: 5173,
  },

  preview: {
    port: 4173,
  },

  build: {
    target: 'baseline-widely-available',
    sourcemap: 'hidden',
  },
});

• target: ‘baseline-widely-available’ — современные браузеры (Chrome 107+, Edge 107+, Firefox 104+, Safari 16+). При необходимости можно задать es2022 или использовать @vitejs/plugin-legacy для старых браузеров.
• sourcemap: ‘hidden’ — карты генерируются (для Sentry/логов), в бандл не добавляется комментарий; пользователь не тянет .map. Варианты: true (отдельные .map + комментарий), false (без карт).
• Файл в корне проекта как vite.config.ts. Для React/Vue/Svelte добавьте плагин в plugins (например @vitejs/plugin-react).

Когда такого конфига достаточно: SPA/MPA на React, Vue, Svelte или vanilla TS/JS; один вход (index.html); деплой — статика в dist, раздача через nginx/CDN.

Когда расширять: плагин фреймворка; base: '/app/' если приложение не в корне; define для глобальных констант; server.proxy для API в dev; SVG как компоненты, legacy, SSR — по документации Vite.

Проверка

1. Сборка — в корне проекта выполните pnpm build (или npm run build). Должна создаться папка dist без ошибок. Проверьте размер выхода и наличие чанков/ассетов.

2. Preview — выполните pnpm preview. Сервер поднимется на порту 4173 (или указанном в preview.port). Откройте в браузере и убедитесь, что приложение открывается и алиас @/ работает (импорты из src/ разрешаются).

3. Sourcemap — после сборки в dist не должно быть комментария //# sourceMappingURL= в основных бандлах при sourcemap: 'hidden'. Файлы .map могут присутствовать в dist; их можно не отдавать с сервера. При sourcemap: true в бандле будет ссылка на .map.

4. Dev-сервер — pnpm dev: приложение на порту 5173, HMR работает. Проверьте алиасы и при необходимости прокси в server.proxy.

Типичные ошибки

• Использование несуществующих опций — все параметры должны быть из официальной документации Vite. Вымышленные или устаревшие ключи могут игнорироваться или ломать конфиг.
• __dirname в ESM — в ESM нет __dirname; используйте path.dirname(fileURLToPath(import.meta.url)) для путей относительно конфига.
• Sourcemap в проде — true добавляет ссылку на .map в бандл; если отдаёте .map с сервера, пользователь может видеть исходники. Для прода лучше hidden или false и не отдавать .map публично.
• Без плагина фреймворка — для JSX/TSX (React), Vue, Svelte нужен соответствующий плагин; иначе сборка или dev могут падать. Добавьте в plugins и установите пакет.

Где применять

• Новые проекты (SPA/MPA): React, Vue, Svelte, vanilla TS/JS. Локальная разработка и продакшн-сборка; деплой статики в dist.
• Миграция с Webpack: см. Типичная миграция Webpack → Vite и Webpack production-конфиг для сравнения.

Связанные сниппеты: Webpack: production-конфиг 2026, Типичная миграция Webpack → Vite.