16. Миграция на Vite

Vite стал популярной альтернативой Webpack благодаря молниеносному dev-серверу и простой конфигурации. Однако миграция требует внимательного подхода — есть ряд нюансов и потенциальных проблем.

Почему мигрируют с Webpack на Vite?

Критерий	Webpack	Vite
Старт dev-сервера	10-60+ сек	< 1 сек
HMR	Секунды	Мгновенно
Конфигурация	Сложная	Простая
Build (production)	Webpack bundler	Rollup
Module Federation	✅ Native	❌ Плагин (ограниченный)
Legacy browsers	Webpack + Babel	@vitejs/plugin-legacy
Кастомные лоадеры	✅	Только Rollup плагины
Размер бандла	Схожий	Схожий

Когда НЕ мигрировать:

• Проект использует Module Federation
• Сложные кастомные Webpack лоадеры без аналогов
• Большой enterprise проект с устоявшейся инфраструктурой
• Интеграция с SSR (Next.js, Remix — у них свои системы сборки)

Шаг 1: Установка Vite

npm install --save-dev vite @vitejs/plugin-react
# или для TypeScript
npm install --save-dev vite @vitejs/plugin-react typescript

Шаг 2: vite.config.ts (эквивалент webpack.config.js)

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],

  // Эквивалент resolve.alias
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },

  // Эквивалент devServer
  server: {
    port: 3000,
    proxy: {
      '/api': { target: 'http://localhost:8080', changeOrigin: true },
    },
  },

  // Эквивалент output
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          'router': ['react-router-dom'],
        },
      },
    },
  },

  // Эквивалент DefinePlugin
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
  },
});

Шаг 3: Переменные окружения

# Webpack
process.env.REACT_APP_API_URL

# Vite — только переменные с префиксом VITE_!
import.meta.env.VITE_API_URL

Если много переменных REACT_APP_*, используйте vite-plugin-env-compatible:

npm install --save-dev vite-plugin-env-compatible

Шаг 4: index.html — из public/ в корень

public/index.html

<div id="root"></div>
<!-- Webpack вставляет <script> автоматически -->

<!-- Vite: index.html в корне проекта -->
<div id="root"></div>
<!-- Явный <script> обязателен! -->
<script type="module" src="/src/index.tsx"></script>

Шаг 5: Эквиваленты конфигураций

DefinePlugin → define

// Webpack
new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') })

// Vite
define: { 'process.env.NODE_ENV': JSON.stringify('production') }

HtmlWebpackPlugin → встроено в Vite

// Webpack: нужен плагин
new HtmlWebpackPlugin({ template: './public/index.html' })

// Vite: не нужен, index.html в корне — автоматически

CopyWebpackPlugin → vite-plugin-static-copy

npm install --save-dev vite-plugin-static-copy

import { viteStaticCopy } from 'vite-plugin-static-copy';

plugins: [
  react(),
  viteStaticCopy({ targets: [{ src: 'public/robots.txt', dest: '' }] }),
]

Шаг 6: npm scripts

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "typecheck": "tsc --noEmit"
  }
}

Типичные проблемы при миграции

require() не работает

// ❌ Webpack поддерживал require() в компонентах
const img = require('./logo.png');

// ✅ Vite: только ES imports
import img from './logo.png';

CommonJS зависимости

Некоторые npm пакеты используют только CommonJS. Vite обычно справляется автоматически через @rollup/plugin-commonjs, но иногда нужен optimizeDeps:

optimizeDeps: {
  include: ['some-cjs-package'],
}

Glob imports

// ❌ Webpack require.context
const modules = require.context('./modules', true, /\\.ts$/);

// ✅ Vite: import.meta.glob
const modules = import.meta.glob('./modules/**/*.ts');

Ниже — интерактивный чеклист миграции с Webpack на Vite.