4. Плагины

Плагины — главный механизм расширения Vite. Plugin API Vite является надмножеством Plugin API Rollup: каждый плагин Vite совместим с Rollup, плюс имеет дополнительные Vite-специфичные хуки.

Официальные плагины

# React (с Fast Refresh)
npm i -D @vitejs/plugin-react
# или с SWC (быстрее для больших проектов)
npm i -D @vitejs/plugin-react-swc

# Vue 3
npm i -D @vitejs/plugin-vue

# Vue JSX
npm i -D @vitejs/plugin-vue-jsx

# Legacy браузеры (IE11, старые Chrome)
npm i -D @vitejs/plugin-legacy

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

vite.config.ts

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

export default defineConfig({
  plugins: [
    react({
      // Babel options для плагина
      babel: {
        plugins: ['babel-plugin-styled-components'],
      },
    }),
    // Плагины выполняются по порядку
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})

Структура плагина Vite

// Базовая структура плагина
import type { Plugin } from 'vite'

export function myPlugin(): Plugin {
  return {
    name: 'my-plugin',       // Обязательно, для отладки

    // === Rollup хуки (работают и в Vite) ===
    buildStart(options) {
      // Вызывается при старте сборки
    },

    resolveId(source, importer) {
      // Кастомная логика разрешения модулей
      if (source === 'virtual:my-module') return source
    },

    load(id) {
      // Загрузка виртуального модуля
      if (id === 'virtual:my-module') {
        return 'export const version = "1.0.0"'
      }
    },

    transform(code, id) {
      // Трансформация кода файла
      if (id.endsWith('.vue')) {
        return transformVue(code)
      }
    },

    // === Vite-специфичные хуки ===
    config(config, { command }) {
      // Изменение конфига до его resolve
      return { resolve: { alias: { ... } } }
    },

    configResolved(config) {
      // Полный resolved конфиг доступен
    },

    configureServer(server) {
      // Добавление middleware к dev серверу
      server.middlewares.use('/my-route', handler)
    },

    handleHotUpdate(ctx) {
      // Кастомная HMR логика
      if (ctx.file.endsWith('.graphql')) {
        ctx.server.ws.send({ type: 'full-reload' })
        return []
      }
    },
  }
}

Популярные community плагины

# PWA поддержка (Service Worker, offline)
npm i -D vite-plugin-pwa

# SVG как React компоненты
npm i -D vite-plugin-svgr

# Анализ бандла (визуализация размеров)
npm i -D rollup-plugin-visualizer

# Inspect плагин (отладка трансформаций)
npm i -D vite-plugin-inspect

# Автоматические импорты (без import React from 'react')
npm i -D unplugin-auto-import

# Иконки
npm i -D unplugin-icons

# Compression (gzip/brotli)
npm i -D vite-plugin-compression

Порядок применения плагинов

// enforce: 'pre' — перед core плагинами Vite
// (default) — между pre и post
// enforce: 'post' — после core плагинов

plugins: [
  { name: 'pre-plugin', enforce: 'pre', transform(c, id) { ... } },
  react(),                    // core (default)
  { name: 'post-plugin', enforce: 'post', transform(c, id) { ... } },
]

apply — только для dev или build

plugins: [
  // Только в dev
  { ...devTools(), apply: 'serve' },

  // Только в production
  { ...minifyPlugin(), apply: 'build' },

  // По условию
  {
    ...myPlugin(),
    apply(config, { command }) {
      return command === 'build' && config.mode === 'production'
    },
  },
]

Ниже — симулятор менеджера плагинов: устанавливайте плагины и смотрите, как меняется итоговый конфиг: