Vite и React

Введение

Vite стал стандартом де-факто для создания и разработки современных React-приложений. В отличие от устаревшего Create React App на базе Webpack, Vite обеспечивает мгновенный старт dev-сервера и молниеносную горячую перезагрузку (HMR) даже в крупных проектах.

Но стандартный шаблон npm create vite@latest — это только отправная точка. В реальных проектах вам потребуется настроить алиасы путей, переменные окружения, code splitting, оптимизацию изображений, прокси для API и множество других параметров.

В этой статье вы узнаете:

• как устроена конфигурация Vite (vite.config.ts) и какие параметры можно настраивать;
• как настроить TypeScript, пути-алиасы и плагины;
• как работать с переменными окружения в Vite-проектах;
• как оптимизировать production-сборку с code splitting;
• как настроить прокси для dev-сервера;
• лучшие практики организации Vite-проекта.

Если вы хотите не только разобраться с Vite, но и в целом освоить профессиональную разработку на React, приходите на наш большой курс Основы React, React Router и Redux Toolkit. На курсе 177 уроков и 17 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Создание проекта с Vite

Инициализация нового проекта

Для создания нового React-проекта с Vite используйте официальный шаблон:

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install
npm run dev

Флаг --template react-ts создаёт проект с TypeScript. Если TypeScript не нужен, используйте --template react.

Доступные шаблоны для React:

• react — React + JavaScript
• react-ts — React + TypeScript
• react-swc — React + JavaScript + SWC (более быстрый компилятор)
• react-swc-ts — React + TypeScript + SWC

Структура проекта после инициализации

my-react-app/
├── public/                 # Статические файлы (копируются "как есть")
│   └── vite.svg
├── src/
│   ├── assets/             # Ресурсы, обрабатываемые Vite
│   │   └── react.svg
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx            # Точка входа приложения
│   └── vite-env.d.ts       # Типы Vite для TypeScript
├── index.html              # Корневой HTML-файл (точка входа Vite)
├── package.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts          # Конфигурация Vite

Важное отличие от других сборщиков — index.html находится в корне проекта, а не внутри public/. Это сделано намеренно: Vite использует index.html как точку входа и может обрабатывать <script type="module"> прямо в нём.

Базовые команды

npm run dev        # Запуск dev-сервера (обычно http://localhost:5173)
npm run build      # Production-сборка (результат в ./dist)
npm run preview    # Предпросмотр production-сборки локально

Конфигурационный файл vite.config.ts

Вся настройка Vite происходит через файл vite.config.ts (или vite.config.js). Это TypeScript-файл с функцией defineConfig.

Базовая структура конфига

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

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

Функция defineConfig — это просто type-хелпер для автодополнения в IDE, она не изменяет конфигурацию. Её использование необязательно, но рекомендуется.

Опции конфигурации

Рассмотрим ключевые опции конфига и что они делают:

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

export default defineConfig({
  // Плагины
  plugins: [react()],

  // Настройки dev-сервера
  server: {
    port: 3000,           // Порт (по умолчанию 5173)
    host: true,           // Слушать на 0.0.0.0 (доступно в сети)
    open: true,           // Открыть браузер при запуске
    https: false,         // HTTPS для dev-сервера
  },

  // Настройки сборки
  build: {
    outDir: 'dist',           // Директория вывода (по умолчанию 'dist')
    sourcemap: true,          // Генерировать source maps
    minify: 'esbuild',        // Минификатор: 'esbuild' | 'terser' | false
    target: 'es2015',         // Целевые браузеры/версии ES
    chunkSizeWarningLimit: 500, // Предупреждение о размере чанка (КБ)
  },

  // Разрешение модулей
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },

  // Переменные CSS
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`,
      },
    },
  },
})

Настройка алиасов путей

Алиасы — это удобные сокращения для длинных путей импорта. Вместо '../../components/Button' вы пишете '@/components/Button'.

Настройка алиасов в vite.config.ts

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@hooks': path.resolve(__dirname, './src/hooks'),
      '@utils': path.resolve(__dirname, './src/utils'),
      '@assets': path.resolve(__dirname, './src/assets'),
      '@pages': path.resolve(__dirname, './src/pages'),
      '@store': path.resolve(__dirname, './src/store'),
      '@types': path.resolve(__dirname, './src/types'),
    },
  },
})

Настройка TypeScript для понимания алиасов

Чтобы TypeScript понимал алиасы и не подчёркивал импорты красным, нужно настроить tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@hooks/*": ["./src/hooks/*"],
      "@utils/*": ["./src/utils/*"],
      "@assets/*": ["./src/assets/*"],
      "@pages/*": ["./src/pages/*"],
      "@store/*": ["./src/store/*"],
      "@types/*": ["./src/types/*"]
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Теперь импорты с алиасами работают в коде:

// Без алиаса (неудобно)
import { Button } from '../../../components/Button'

// С алиасом (удобно)
import { Button } from '@/components/Button'
import { useAuth } from '@hooks/useAuth'

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

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

Файлы .env

Vite автоматически подгружает переменные из следующих файлов:

.env                    # Всегда загружается
.env.local              # Всегда загружается, игнорируется git
.env.development        # Загружается только при npm run dev
.env.development.local  # Загружается только при dev, игнорируется git
.env.production         # Загружается только при npm run build
.env.production.local   # Загружается только при build, игнорируется git

Правила именования переменных

Важно: Vite открывает браузеру только переменные с префиксом VITE_. Переменные без этого префикса доступны только в Node.js (в vite.config.ts).

# .env
VITE_API_URL=https://api.example.com      # Доступна в браузере
VITE_APP_TITLE=My React App               # Доступна в браузере
SECRET_KEY=super-secret                   # НЕ доступна в браузере (без VITE_)

Использование в коде

// Доступ к переменным в React-компонентах
const apiUrl = import.meta.env.VITE_API_URL
const appTitle = import.meta.env.VITE_APP_TITLE

// Встроенные переменные Vite
const isDev = import.meta.env.DEV         // true в development
const isProd = import.meta.env.PROD       // true в production
const mode = import.meta.env.MODE        // 'development' или 'production'
const baseUrl = import.meta.env.BASE_URL // значение опции base из конфига

console.log('API URL:', apiUrl)
console.log('Mode:', import.meta.env.MODE)

Типизация переменных окружения

Для TypeScript добавьте типы в файл src/vite-env.d.ts:

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string
  readonly VITE_APP_TITLE: string
  readonly VITE_FEATURE_FLAG: string
  // добавьте остальные переменные...
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

Теперь import.meta.env будет полностью типизирован с автодополнением.

Настройка плагинов

Экосистема плагинов Vite огромна. Рассмотрим наиболее полезные для React-проектов.

@vitejs/plugin-react vs @vitejs/plugin-react-swc

По умолчанию используется @vitejs/plugin-react на базе Babel. Для более быстрой компиляции можно переключиться на SWC:

npm install -D @vitejs/plugin-react-swc

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

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

SWC (Speedy Web Compiler) написан на Rust и компилирует TypeScript/JSX значительно быстрее Babel. Разница особенно заметна в крупных проектах.

Настройка @vitejs/plugin-react

Плагин React поддерживает ряд опций:

import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      // Включить Fast Refresh для компонентов
      // (включён по умолчанию в dev-режиме)
      fastRefresh: true,

      // Дополнительные Babel-плагины
      babel: {
        plugins: [
          // Например, для emotion CSS-in-JS
          ['@emotion/babel-plugin'],
        ],
      },

      // Включить JSX runtime (по умолчанию true)
      jsxRuntime: 'automatic',
    }),
  ],
})

vite-plugin-svgr — SVG как компоненты React

Позволяет импортировать SVG-файлы как React-компоненты:

npm install -D vite-plugin-svgr

import svgr from 'vite-plugin-svgr'

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

Использование:

// Импорт SVG как React-компонента
import { ReactComponent as Logo } from './logo.svg'
// или с именованным импортом (новый синтаксис)
import Logo from './logo.svg?react'

function Header() {
  return <Logo width={100} height={50} />
}

vite-plugin-checker — проверка типов во время разработки

По умолчанию Vite не выполняет проверку типов TypeScript (только транспиляцию через esbuild). Для проверки типов в реальном времени:

npm install -D vite-plugin-checker

import checker from 'vite-plugin-checker'

export default defineConfig({
  plugins: [
    react(),
    checker({
      typescript: true,     // Проверять TypeScript
      eslint: {
        lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
      },
    }),
  ],
})

rollup-plugin-visualizer — анализ размера бандла

Незаменимый плагин для оптимизации: показывает, какие модули занимают больше всего места:

npm install -D rollup-plugin-visualizer

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    react(),
    visualizer({
      open: true,         // Открыть отчёт после сборки
      gzipSize: true,     // Показывать gzip-размер
      brotliSize: true,   // Показывать brotli-размер
      filename: 'dist/stats.html',
    }),
  ],
})

Настройка dev-сервера и прокси

Базовые настройки server

export default defineConfig({
  server: {
    port: 3000,       // Порт dev-сервера
    host: '0.0.0.0',  // Доступ из локальной сети
    open: '/login',   // Открыть конкретный URL при запуске
    strictPort: true, // Ошибка вместо смены порта, если порт занят
    https: {          // HTTPS (нужны сертификаты)
      key: './certs/key.pem',
      cert: './certs/cert.pem',
    },
  },
})

Настройка прокси для API

Прокси позволяет решить проблему CORS при разработке — запросы к /api будут перенаправляться на бэкенд-сервер:

export default defineConfig({
  server: {
    proxy: {
      // Простой прокси
      '/api': 'http://localhost:8080',

      // Прокси с дополнительными опциями
      '/api/v2': {
        target: 'http://localhost:8080',
        changeOrigin: true,  // Изменить заголовок Host
        rewrite: (path) => path.replace(/^\/api\/v2/, '/api'),
      },

      // Прокси для WebSocket
      '/socket.io': {
        target: 'ws://localhost:8080',
        ws: true,
      },

      // Несколько путей на разные сервисы
      '/auth': {
        target: 'http://localhost:3001',
        changeOrigin: true,
      },
    },
  },
})

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

// Запрос уйдёт через прокси на http://localhost:8080/api/users
const response = await fetch('/api/users')

HMR настройки

export default defineConfig({
  server: {
    hmr: {
      port: 5174,           // Отдельный порт для WebSocket HMR
      overlay: true,        // Показывать ошибки поверх приложения
    },
  },
})

Оптимизация production-сборки

Настройки build

export default defineConfig({
  build: {
    outDir: 'dist',                  // Директория вывода
    assetsDir: 'assets',             // Поддиректория для ресурсов
    sourcemap: false,                // Отключить source maps в prod
    minify: 'esbuild',               // Минификатор (быстрее terser)
    target: 'es2015',                // Поддержка браузеров
    cssCodeSplit: true,              // Разделять CSS по чанкам
    chunkSizeWarningLimit: 1000,     // Предупреждение (КБ)
    emptyOutDir: true,               // Очищать dist перед сборкой
    reportCompressedSize: false,     // Не считать размер сжатых файлов (ускоряет сборку)
  },
})

Code Splitting — разделение кода

Code splitting позволяет разбить приложение на части (чанки), которые загружаются по мере необходимости, уменьшая начальный размер бандла.

Динамический импорт в React

Самый простой способ code splitting — React.lazy() с Suspense:

import React, { Suspense, lazy } from 'react'
import { Routes, Route } from 'react-router-dom'

// Эти компоненты будут в отдельных чанках
const Dashboard = lazy(() => import('./pages/Dashboard'))
const Settings = lazy(() => import('./pages/Settings'))
const Profile = lazy(() => import('./pages/Profile'))

function App() {
  return (
    <Suspense fallback={<div>Загрузка...</div>}>
      <Routes>
        <Route path="/" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </Suspense>
  )
}

При этом Vite автоматически создаст отдельный .js-файл для каждой страницы.

Ручная настройка чанков через rollupOptions

Для контроля над разделением бандла используйте rollupOptions:

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // Разделить vendor-библиотеки в отдельные чанки
        manualChunks: {
          'react-vendor': ['react', 'react-dom'],
          'router': ['react-router-dom'],
          'redux': ['@reduxjs/toolkit', 'react-redux'],
          'ui': ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
        },

        // Или через функцию для динамического определения чанков
        // manualChunks(id) {
        //   if (id.includes('node_modules')) {
        //     return 'vendor'
        //   }
        // },

        // Настройка имён файлов
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
      },
    },
  },
})

Оптимизация зависимостей

Vite использует esbuild для предварительной оптимизации зависимостей (dep optimization). Это ускоряет загрузку страниц в режиме разработки.

export default defineConfig({
  optimizeDeps: {
    // Явно включить пакеты для предоптимизации
    include: [
      'lodash-es',
      '@mui/material',
      'react-virtualized',
    ],
    // Исключить пакеты из предоптимизации
    exclude: ['some-local-package'],
    // Дополнительные esbuild-опции для оптимизации
    esbuildOptions: {
      target: 'es2020',
    },
  },
})

Работа с ресурсами (assets)

Импорт изображений

// Импорт изображения — Vite вернёт URL
import logoUrl from './logo.png'

function App() {
  return <img src={logoUrl} alt="Logo" />
}

// Явное получение URL через ?url
import imageUrl from './hero.jpg?url'

// Импорт как строка base64 (для маленьких изображений)
import iconBase64 from './icon.png?inline'

// Получение сырых байт
import rawData from './data.bin?raw'

Настройка лимита для inline-ресурсов

По умолчанию Vite инлайнит ресурсы меньше 4KB как base64. Можно изменить:

export default defineConfig({
  build: {
    assetsInlineLimit: 8192, // 8KB (в байтах)
  },
})

Публичные ресурсы

Файлы в папке public/ копируются в корень dist/ без обработки. Они доступны по абсолютному пути:

// public/robots.txt → dist/robots.txt
// public/images/logo.png → dist/images/logo.png

// В коде обращайтесь по абсолютному пути
<img src="/images/logo.png" alt="Logo" />

TypeScript в Vite-проектах

tsconfig.node.json для конфига Vite

Файл tsconfig.node.json нужен для того, чтобы TypeScript правильно проверял vite.config.ts — этот файл выполняется в Node.js, а не в браузере:

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

Использование importMeta в TypeScript

Если используете import.meta.env или другие Vite-специфичные фичи, добавьте ссылку на типы Vite:

// src/vite-env.d.ts (создаётся автоматически при инициализации)
/// <reference types="vite/client" />

Это добавляет типы для import.meta.env, import.meta.hot и т.д.

Режимы и конфигурация под разные окружения

Несколько конфигов через режимы

Vite поддерживает режимы (mode). По умолчанию:

• npm run dev → режим development
• npm run build → режим production

Можно задавать свои режимы:

vite build --mode staging
vite build --mode preview

В зависимости от режима загружаются разные .env-файлы:

.env.staging        # загружается при --mode staging
.env.preview        # загружается при --mode preview

Условная конфигурация в vite.config.ts

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig(({ command, mode }) => {
  // Загружаем переменные окружения вручную
  const env = loadEnv(mode, process.cwd(), '')

  const isDev = command === 'serve'
  const isProd = command === 'build'

  return {
    plugins: [react()],

    define: {
      // Делаем переменные доступными глобально в коде
      __APP_VERSION__: JSON.stringify(env.npm_package_version),
      __API_URL__: JSON.stringify(env.VITE_API_URL),
    },

    server: isDev ? {
      port: 3000,
      proxy: {
        '/api': env.VITE_API_URL,
      },
    } : undefined,

    build: isProd ? {
      sourcemap: false,
      minify: 'esbuild',
    } : undefined,
  }
})

Настройка CSS и препроцессоров

CSS Modules

Vite поддерживает CSS Modules из коробки — просто назовите файл .module.css:

/* Button.module.css */
.button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
}

.buttonPrimary {
  background-color: #0056b3;
}

import styles from './Button.module.css'

function Button({ primary }: { primary?: boolean }) {
  return (
    <button
      className={`${styles.button} ${primary ? styles.buttonPrimary : ''}`}
    >
      Click me
    </button>
  )
}

SCSS/Sass

Просто установите sass — никаких плагинов не нужно:

npm install -D sass

// Теперь можно импортировать .scss/.sass файлы
import './styles/main.scss'

Для глобальных переменных SCSS во всех файлах:

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // Автоматически добавлять импорт переменных во все SCSS файлы
        additionalData: `@use "@/styles/variables" as *;`,
      },
    },
  },
})

Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.js
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Vite обрабатывает PostCSS автоматически при наличии postcss.config.js в корне.

Практический пример: полный vite.config.ts для production

Вот реалистичный конфиг для реального React-проекта с TypeScript, Tailwind CSS, алиасами и оптимизацией:

import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
import { visualizer } from 'rollup-plugin-visualizer'
import svgr from 'vite-plugin-svgr'
import checker from 'vite-plugin-checker'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  const isProduction = mode === 'production'
  const isAnalyze = process.env.ANALYZE === 'true'

  return {
    plugins: [
      react(),
      svgr(),
      checker({
        typescript: true,
      }),
      isAnalyze && visualizer({
        open: true,
        gzipSize: true,
        filename: 'dist/stats.html',
      }),
    ].filter(Boolean),

    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@components': path.resolve(__dirname, './src/components'),
        '@hooks': path.resolve(__dirname, './src/hooks'),
        '@pages': path.resolve(__dirname, './src/pages'),
        '@store': path.resolve(__dirname, './src/store'),
        '@utils': path.resolve(__dirname, './src/utils'),
        '@types': path.resolve(__dirname, './src/types'),
        '@assets': path.resolve(__dirname, './src/assets'),
      },
    },

    server: {
      port: 3000,
      proxy: {
        '/api': {
          target: env.VITE_API_URL || 'http://localhost:8080',
          changeOrigin: true,
        },
      },
    },

    build: {
      outDir: 'dist',
      sourcemap: !isProduction,
      minify: isProduction ? 'esbuild' : false,
      target: 'es2015',
      rollupOptions: {
        output: {
          manualChunks: {
            'react-vendor': ['react', 'react-dom'],
            'router': ['react-router-dom'],
          },
          chunkFileNames: 'assets/js/[name]-[hash].js',
          entryFileNames: 'assets/js/[name]-[hash].js',
          assetFileNames: ({ name }) => {
            if (/\.(png|jpe?g|gif|svg|webp|ico)$/.test(name ?? '')) {
              return 'assets/images/[name]-[hash][extname]'
            }
            if (/\.css$/.test(name ?? '')) {
              return 'assets/css/[name]-[hash][extname]'
            }
            return 'assets/[name]-[hash][extname]'
          },
        },
      },
    },

    optimizeDeps: {
      include: ['react', 'react-dom'],
    },

    css: {
      devSourcemap: true,
    },
  }
})

Сравнение Vite и Create React App

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

CRA (Create React App) официально считается устаревшим и больше не рекомендуется командой React. Vite — рекомендуемый выбор для новых проектов.

Типичные проблемы и их решение

Проблема: CommonJS-модули не работают с ESM

Некоторые старые npm-пакеты используют CommonJS, что может вызывать проблемы:

// Решение: добавить в optimizeDeps.include
export default defineConfig({
  optimizeDeps: {
    include: ['some-commonjs-package'],
  },
})

Проблема: import.meta.env не работает

// Неправильно — не делайте деструктуризацию
const { VITE_API_URL } = import.meta.env  // может не работать

// Правильно — обращайтесь напрямую
const apiUrl = import.meta.env.VITE_API_URL

Проблема: Vite не видит изменения в node_modules

# Очистите кэш Vite и перезапустите
npx vite --force
# или
rm -rf node_modules/.vite

Проблема: process.env не определён

В отличие от CRA, Vite не предоставляет process.env. Используйте import.meta.env:

// Неправильно (CRA стиль)
const apiUrl = process.env.REACT_APP_API_URL

// Правильно (Vite стиль)
const apiUrl = import.meta.env.VITE_API_URL

Если нужна совместимость со старым кодом, добавьте в конфиг:

export default defineConfig({
  define: {
    'process.env': {}
  },
})

Заключение

Vite — мощный и гибкий инструмент, который значительно ускоряет разработку React-приложений. В этой статье вы изучили:

• Структуру и базовую конфигурацию через vite.config.ts
• Алиасы путей для удобных импортов и их настройку в TypeScript
• Переменные окружения через .env файлы и import.meta.env
• Популярные плагины для SVG, проверки типов и анализа бандла
• Прокси для решения CORS-проблем при разработке
• Оптимизацию сборки с code splitting, manualChunks и минификацией
• Работу с CSS — CSS Modules, SCSS и Tailwind CSS
• Типичные проблемы и способы их решения

Понимание конфигурации Vite — обязательный навык для современного React-разработчика. С хорошо настроенным Vite ваши проекты будут быстро собираться, удобно разрабатываться и оптимально работать в production.

Если вы хотите глубже погрузиться в React и научиться создавать профессиональные приложения, приходите на наш курс Основы React, React Router и Redux Toolkit. На курсе 177 уроков и 17 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7.