Что такое Vite и почему он является стандартным инструментом сборки для проектов Vue 3?

Что такое Vite

Vite (от фр. «быстро») — это инструмент разработки и сборки, созданный Эваном Ю (автором Vue). Его ключевая идея: в режиме разработки не бандлить весь код заранее, а отдавать браузеру нативные ES-модули по запросу. Браузер сам разрешает импорты, Vite обрабатывает только запрошенные файлы.

Почему Vite быстрее webpack в dev

• No bundling on start — webpack собирает весь граф зависимостей при старте, Vite стартует немедленно.
• Pre-bundling зависимостей — node_modules (CommonJS) Vite один раз конвертирует в ESM через esbuild (написан на Go, ~100x быстрее JS-бандлеров) и кэширует.
• HMR по модулям — при изменении файла обновляется только один модуль, а не перестраивается граф. Замена в браузере < 50 мс даже в больших проектах.

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

// npm create vue@latest my-app
// Или через Vite напрямую:
// npm create vite@latest my-app -- --template vue-ts

Конфигурация vite.config.ts

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

export default defineConfig({
  plugins: [
    vue(),
    // vueJsx() — если нужен JSX
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8000',  // проксирование к backend
    },
  },
  build: {
    target: 'esnext',
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router', 'pinia'],
        },
      },
    },
  },
})

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

Vite использует файлы .env, .env.development, .env.production. Только переменные с префиксом VITE_ доступны в коде:

// .env
VITE_API_URL=https://api.example.com
SECRET_KEY=hidden  // недоступно в браузере

// В коде:
console.log(import.meta.env.VITE_API_URL)   // ок
console.log(import.meta.env.SECRET_KEY)     // undefined

Vite vs Vue CLI

• Vue CLI (webpack) — устаревший инструмент, официально переведён в maintenance mode.
• Vite — текущий стандарт для новых Vue 3-проектов.
• Vite поддерживает не только Vue, но и React, Svelte, Lit, Vanilla JS.

Подводные камни

• Vite в dev отдаёт нативные ESM, но в продакшн собирает через Rollup. Редкие случаи: код работает в dev, но ломается в build из-за разного разрешения импортов.
• CommonJS-пакеты, использующие require() динамически (require(variable)), не обрабатываются esbuild автоматически — нужен плагин vite-plugin-commonjs.
• Переменные окружения без префикса VITE_ не попадают в клиентский бандл — частая ошибка новичков при настройке API URL.
• Горячая замена модулей (import.meta.hot) работает только в dev-режиме. Код с явными HMR API-вызовами нужно гардить через if (import.meta.hot).
• Большие проекты с тысячами модулей могут давать медленный первый запрос в dev (браузер делает сотни HTTP-запросов). Решение — optimizeDeps.include для pre-bundling нужных пакетов.
• Абсолютные импорты без настройки алиаса в resolve.alias не работают — в отличие от CRA с webpack.
• SSR с Vite (Nuxt 3) требует отдельной конфигурации ssr: true в плагинах — не все плагины поддерживают SSR-режим.

• Считать, что Vite в проде тоже «без бандла» — там работает Rollup.
• Не запускать vite build локально перед релизом и пропускать ошибки tree-shaking.
• Подключать CommonJS-пакеты без проверки exports и удивляться сбоям pre-bundling.
• Удалять node_modules/.vite при каждом запуске — не нужно, кэш можно тёплый.

• Различает dev-режим (ESM + esbuild) и prod-режим (Rollup).
• Знает плагин @vitejs/plugin-vue и роль @vue/compiler-sfc.
• Может объяснить HMR и pre-bundling.
• Видит связь с Nuxt 3 и SSR.