Популярные плагины экосистемы

Назначение плагинов в архитектуре Vite

Система плагинов — одна из ключевых частей Vite. Большинство возможностей экосистемы реализуется именно через плагины: поддержка фреймворков, оптимизация изображений, работа с SVG, генерация PWA-приложений, проверка типов, линтинг, SSR, интеграция Markdown и многое другое.

Vite использует совместимую с Rollup архитектуру плагинов, поэтому многие Rollup-плагины работают без изменений. При этом Vite добавляет собственные хуки, ориентированные на dev server, HMR и оптимизированную разработку.

Подключение большинства плагинов происходит через массив plugins в конфигурации vite.config.js:

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: []
})

Плагин @vitejs/plugin-vue

Назначение

Плагин обеспечивает поддержку Vue Single File Components (.vue), HMR, компиляцию шаблонов, поддержку <script setup> и другие возможности Vue.

Установка

npm install vue @vitejs/plugin-vue

Подключение

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

export default defineConfig({
  plugins: [vue()]
})

Возможности плагина

Поддержка SFC

<template>
  <h1>{{ title }}</h1>
</template>

<script setup>
const title = 'Vite + Vue'
</script>

<style scoped>
h1 {
  color: red;
}
</style>

Hot Module Replacement

При изменении .vue файла обновляется только изменённый компонент, без полной перезагрузки страницы.

Поддержка TypeScript

<script setup lang="ts">
interface User {
  name: string
}

const user: User = {
  name: 'Alex'
}
</script>

Плагин @vitejs/plugin-react

Назначение

Добавляет поддержку React, JSX, Fast Refresh и трансформацию через Babel.

Установка

npm install react react-dom @vitejs/plugin-react

Подключение

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

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

Fast Refresh

Fast Refresh обновляет React-компоненты без потери состояния.

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <button onCl ick={() => setCount(count + 1)}>
      {count}
    </button>
  )
}

После изменения JSX состояние компонента сохраняется.

Настройка Babel

react({
  babel: {
    plugins: ['babel-plugin-styled-components']
  }
})

Плагин @vitejs/plugin-react-swc

Назначение

Альтернатива стандартному React-плагину, использующая SWC вместо Babel.

Особенности

  • более высокая скорость компиляции;
  • уменьшенное потребление памяти;
  • ускоренный HMR;
  • быстрый production build.

Подключение

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

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

Ограничения

Некоторые Babel-плагины несовместимы с SWC. При использовании сложной Babel-экосистемы предпочтительнее стандартный React plugin.

Плагин vite-plugin-checker

Назначение

Выполняет проверку TypeScript, ESLint, Stylelint и других инструментов параллельно с dev server.

Установка

npm install vite-plugin-checker -D

Подключение

import checker from 'vite-plugin-checker'

export default {
  plugins: [
    checker({
      typescript: true
    })
  ]
}

Проверка ESLint

checker({
  eslint: {
    lintCommand: 'eslint "./src/**/*.{js,ts,vue}"'
  }
})

Проверка Stylelint

checker({
  stylelint: {
    lintCommand: 'stylelint "./src/**/*.{css,scss}"'
  }
})

Преимущества

  • ошибки отображаются прямо в браузере;
  • проверки работают в отдельном потоке;
  • dev server остаётся быстрым;
  • снижается нагрузка на основной процесс Vite.

Плагин vite-plugin-eslint

Назначение

Интеграция ESLint непосредственно в Vite.

Подключение

npm install vite-plugin-eslint eslint -D
import eslint from 'vite-plugin-eslint'

export default {
  plugins: [
    eslint()
  ]
}

Автоматическая проверка

При сохранении файлов запускается линтинг:

eslint({
  include: ['src/**/*.js', 'src/**/*.vue']
})

Отличия от vite-plugin-checker

vite-plugin-eslint ориентирован исключительно на ESLint, тогда как vite-plugin-checker поддерживает сразу несколько инструментов.

Плагин vite-tsconfig-paths

Назначение

Добавляет поддержку alias из tsconfig.json.

Проблема без плагина

{
  "compilerOptions": {
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

TypeScript понимает alias, но Vite — нет.

Решение

npm install vite-tsconfig-paths -D
import tsconfigPaths from 'vite-tsconfig-paths'

export default {
  plugins: [
    tsconfigPaths()
  ]
}

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

import Button from '@/components/Button'

Плагин vite-plugin-svg-icons

Назначение

Создание SVG sprite из набора иконок.

Установка

npm install vite-plugin-svg-icons -D

Подключение

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default {
  plugins: [
    createSvgIconsPlugin({
      iconDirs: [
        path.resolve(process.cwd(), 'src/icons')
      ],
      symbolId: 'icon-[name]'
    })
  ]
}

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

<svg>
  <use href="#icon-user"></use>
</svg>

Преимущества SVG sprite

  • уменьшение количества HTTP-запросов;
  • повторное использование SVG;
  • возможность стилизации через CSS;
  • минимальный размер ресурсов.

Плагин vite-svg-loader

Назначение

Позволяет импортировать SVG как Vue-компоненты.

Установка

npm install vite-svg-loader -D

Подключение

import svgLoader from 'vite-svg-loader'

export default {
  plugins: [
    svgLoader()
  ]
}

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

<script setup>
import LogoIcon from './logo.svg'
</script>

<template>
  <LogoIcon />
</template>

Плагин vite-plugin-pages

Назначение

Автоматическая генерация маршрутов на основе файловой структуры.

Принцип работы

src/pages/
├── index.vue
├── about.vue
└── users/
    └── profile.vue

Автоматически создаются маршруты:

/
about
/users/profile

Подключение

npm install vite-plugin-pages -D
import Pages from 'vite-plugin-pages'

export default {
  plugins: [
    Pages()
  ]
}

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

import { createRouter } from 'vue-router'
import routes from '~pages'

const router = createRouter({
  history,
  routes
})

Плагин unplugin-auto-import

Назначение

Автоматический импорт API библиотек.

Проблема

import { ref, computed } from 'vue'

Подобные импорты постоянно повторяются.

Решение

npm install unplugin-auto-import -D
import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      imports: ['vue']
    })
  ]
}

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

const count = ref(0)

Импорт создаётся автоматически.

Генерация деклараций

AutoImport({
  dts: true
})

Создаётся файл:

auto-imports.d.ts

Плагин unplugin-vue-components

Назначение

Автоматическая регистрация Vue-компонентов.

Подключение

npm install unplugin-vue-components -D
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    Components()
  ]
}

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

<template>
  <BaseButton />
</template>

Без ручного импорта:

import BaseButton from './components/BaseButton.vue'

Плагин vite-plugin-pwa

Назначение

Добавляет поддержку Progressive Web App.

Возможности

  • service worker;
  • offline mode;
  • кэширование;
  • installable app;
  • web manifest.

Установка

npm install vite-plugin-pwa -D

Подключение

import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA({
      registerType: 'autoUpdate'
    })
  ]
}

Настройка manifest

VitePWA({
  manifest: {
    name: 'My App',
    short_name: 'App',
    theme_color: '#ffffff'
  }
})

Плагин vite-imagetools

Назначение

Трансформация изображений во время сборки.

Пример

import img from './image.png?w=400&format=webp'

Возможности

  • изменение размера;
  • конвертация форматов;
  • оптимизация;
  • генерация responsive images.

Подключение

npm install vite-imagetools -D
import { imagetools } from 'vite-imagetools'

export default {
  plugins: [imagetools()]
}

Плагин vite-plugin-compression

Назначение

Создание gzip и brotli ресурсов во время build.

Установка

npm install vite-plugin-compression -D

Подключение

import compression from 'vite-plugin-compression'

export default {
  plugins: [
    compression({
      algorithm: 'gzip'
    })
  ]
}

Brotli

compression({
  algorithm: 'brotliCompress'
})

Преимущества

  • уменьшение размера JS;
  • ускорение загрузки;
  • снижение трафика;
  • улучшение Lighthouse metrics.

Плагин rollup-plugin-visualizer

Назначение

Анализ размера bundle.

Установка

npm install rollup-plugin-visualizer -D

Подключение

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

export default {
  plugins: [
    visualizer()
  ]
}

Результат

После сборки создаётся HTML-отчёт:

stats.html

Анализ bundle

Плагин показывает:

  • размер модулей;
  • зависимости;
  • дублирование библиотек;
  • наиболее тяжёлые chunks.

Плагин vite-plugin-inspect

Назначение

Инструмент отладки плагинов и трансформаций.

Подключение

npm install vite-plugin-inspect -D
import Inspect from 'vite-plugin-inspect'

export default {
  plugins: [
    Inspect()
  ]
}

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

После запуска проекта:

/__inspect/

Возможности

  • просмотр pipeline трансформаций;
  • анализ hook execution;
  • исследование результатов плагинов;
  • отладка AST-преобразований.

Плагин vite-plugin-mkcert

Назначение

Автоматическая генерация локальных HTTPS сертификатов.

Подключение

npm install vite-plugin-mkcert -D
import mkcert from 'vite-plugin-mkcert'

export default {
  plugins: [
    mkcert()
  ]
}

HTTPS server

export default {
  server: {
    https: true
  }
}

Применение

Полезно при разработке:

  • PWA;
  • WebAuthn;
  • Service Worker;
  • HTTP/2;
  • secure cookies.

Плагин vite-plugin-static-copy

Назначение

Копирование статических файлов во время build.

Подключение

npm install vite-plugin-static-copy -D
import { viteStaticCopy } from 'vite-plugin-static-copy'

export default {
 plugins: [
    viteStaticCopy({
      targets: [
        {
          src: 'bin/*.wasm',
          dest: 'wasm'
        }
      ]
    })
  ]
}

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

Особенно полезен для:

  • WebAssembly;
  • сторонних бинарных файлов;
  • PDF;
  • JSON-ресурсов;
  • статических SDK.

Плагин vite-plugin-top-level-await

Назначение

Добавляет поддержку top-level await для старых браузеров.

Пример

const data = await fetch('/api/data')

Подключение

npm install vite-plugin-top-level-await -D
import topLevelAwait from 'vite-plugin-top-level-await'

export default {
  plugins: [
    topLevelAwait()
  ]
}

Плагин vite-plugin-html

Назначение

Трансформация HTML во время сборки.

Подключение

npm install vite-plugin-html -D
import { createHtmlPlugin } from 'vite-plugin-html'

export default {
  plugins: [
    createHtmlPlugin({
      inject: {
        data: {
          title: 'My Application'
        }
      }
    })
  ]
}

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

<title><%= title %></title>

Плагин vite-plugin-mock

Назначение

Создание mock API для frontend-разработки.

Подключение

npm install vite-plugin-mock mockjs -D
import { viteMockServe } from 'vite-plugin-mock'

export default {
  plugins: [
    viteMockServe()
  ]
}

Пример mock

export default [
  {
    url: '/api/user',
    method: 'get',
    response: () => {
      return {
        id: 1,
        name: 'Admin'
      }
    }
  }
]

Критерии выбора плагинов

Совместимость с Vite

Некоторые старые Rollup-плагины могут работать некорректно из-за отсутствия поддержки dev server и HMR.

Поддержка SSR

Не все плагины совместимы с server-side rendering.

Производительность

Некоторые плагины существенно замедляют:

  • cold start;
  • HMR;
  • production build.

Особенно это касается сложных AST-трансформаций и линтинга.

Активность поддержки

Важно учитывать:

  • частоту обновлений;
  • совместимость с новыми версиями Vite;
  • наличие TypeScript typings;
  • активность issue tracker.

Порядок подключения

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

plugins: [
  vue(),
  AutoImport(),
  Components()
]

Некоторые плагины должны выполняться раньше или позже других.

Условное подключение

plugins: [
  process.env.ANALYZE && visualizer()
].filter(Boolean)

Подключение только для production

export default defineConfig(({ command }) => {
  return {
    plugins: [
      command === 'build' && compression()
    ].filter(Boolean)
  }
})
Оглавление