Vite плагины

Плагины в Vite играют ключевую роль в расширении возможностей сборщика. Они позволяют интегрировать сторонние инструменты, оптимизировать сборку, добавлять поддержку специфических форматов и управлять процессом разработки. Каждый плагин в Vite реализует набор хуков, которые срабатывают на разных этапах сборки: от начальной загрузки модулей до генерации финального бандла.

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

load – отвечает за загрузку исходного кода модулей.
transform – позволяет изменять содержимое модулей перед их обработкой Vite.
resolveId – управляет процессом разрешения путей модулей.
buildStart и buildEnd – хуки, вызываемые в начале и конце сборки.
generateBundle – даёт доступ к финальному бандлу перед записью на диск.

Использование плагинов задаётся через объект конфигурации vite.config.js в секции plugins. Простейший пример подключения плагина выглядит следующим образом:

import vue from '@vitejs/plugin-vue';

export default {
  plugins: [vue()]
}

Здесь плагин @vitejs/plugin-vue обеспечивает полноценную поддержку компонентов Vue 3, включая шаблоны, скрипты и стили.

Создание собственного плагина

Собственный плагин в Vite создаётся как объект с обязательным полем name и набором хуков. Минимальный пример:

export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (id.endsWith('.txt')) {
        return `export default ${JSON.stringify(code)}`;
      }
    }
  };
}

В этом примере любой импорт .txt файла будет автоматически конвертироваться в экспортированный модуль JavaScript.

Ключевые моменты при разработке плагина:

Идентификатор плагина (name) должен быть уникальным, чтобы избежать конфликтов.
Асинхронные хуки поддерживаются, что позволяет выполнять сетевые запросы или читать файлы с диска.
Фильтрация файлов через регулярные выражения или id.endsWith повышает производительность.
Совместимость с Rollup позволяет использовать существующие плагины для CSS, TypeScript, Babel и других инструментов.

Плагины для обработки CSS и стилей

Vite поддерживает подключение CSS через плагины, что позволяет интегрировать препроцессоры, такие как Sass, Less или PostCSS.

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

import postcss from 'rollup-plugin-postcss';

export default {
  plugins: [
    postcss({
      plugins: [],
      extract: true
    })
  ]
}

Особенности:

extract: true создаёт отдельный CSS-файл вместо инлайна в JS.
Поддерживаются autoprefixer, минификация и кастомные PostCSS плагины.

Для Vuetify критично использовать плагин для автоматического импорта стилей компонентов, что снижает размер бандла и ускоряет загрузку.

Интеграция с TypeScript и Babel

Плагины для TypeScript и Babel позволяют обрабатывать современные возможности языка до передачи кода в браузер.

Пример подключения TypeScript через vite-plugin-checker:

import checker from 'vite-plugin-checker';

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

Здесь плагин проверяет типизацию в реальном времени без замедления сборки.

Babel-плагины применяются аналогично через Rollup-совместимые обёртки. Это особенно важно для проектов, которые используют нестандартные синтаксические возможности или экспериментальные плагины JavaScript.

Оптимизация сборки с помощью плагинов

Vite поддерживает плагины для улучшения производительности и уменьшения размера бандла:

vite-plugin-compression – сжимает выходные файлы gzip или Brotli.
vite-plugin-imagemin – оптимизирует изображения без потери качества.
vite-plugin-svg-icons – генерирует SVG спрайты для эффективного использования в компонентах.

Пример подключения сжатия:

import viteCompression from 'vite-plugin-compression';

export default {
  plugins: [
    viteCompression({
      algorithm: 'brotliCompress',
      ext: '.br'
    })
  ]
}

В результате финальный бандл значительно меньше, что ускоряет загрузку приложения.

Автоматизация и интеграция с Vuetify

Для Vuetify существует официальный плагин vuetify/vite-plugin, который упрощает настройку компонентов и темизации:

import vuetify from 'vite-plugin-vuetify';

export default {
  plugins: [
    vuetify({ autoImport: true })
  ]
}

Ключевые преимущества:

Автоматический импорт используемых компонентов, что сокращает размер бандла.
Поддержка кастомных тем и стилей.
Интеграция с ViteDevServer для мгновенного обновления UI при изменении стилей.

Комбинируя плагины для CSS, TypeScript и Vuetify, можно создать мощную конфигурацию, которая минимизирует рутинную работу и ускоряет разработку крупных проектов.

Хуки плагинов для продвинутой кастомизации

Для сложных проектов важно использовать расширенные хуки:

config – изменение конфигурации Vite перед сборкой.
configResolved – доступ к финальной конфигурации после её объединения с настройками пользователя.
handleHotUpdate – кастомная обработка HMR (Hot Module Replacement).

Пример обработки HMR:

export default function customHMR() {
  return {
    name: 'custom-hmr',
    handleHotUpdate({ file, server }) {
      if (file.endsWith('.txt')) {
        server.ws.send({
          type: 'full-reload'
        });
      }
    }
  };
}

Таким образом, можно контролировать, какие изменения вызывают перезагрузку или обновление модулей в браузере.