0Pricing
Vue Academy · Урок

Экосистема Vite: плагины и инструменты

Экосистема unplugin, vite-plugin-vue, vite-plugin-inspect и vite-bundle-visualizer

«Экосистема Vite: плагины и инструменты» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.

Экосистема плагинов Vite

Система плагинов Vite, построенная на интерфейсе Rollup и дополненная специальными хуками Vite, обеспечивает богатую экосистему. В проектах Vue несколько плагинов значительно улучшают взаимодействие разработчика с инструментами: автоматический импорт, автоматическая регистрация компонентов, проверка преобразований и анализ пакета.

unplugin-auto-import

unplugin-auto-import автоматически импортирует распространённые API (например, ref и computed из Vue, вспомогательные функции Router и Pinia, а также Ваши собственные составные функции), поэтому Вам не нужно писать операторы импорта.

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts'
    })
  ]
})

Автоматический импорт собственных составных функций

Укажите этому плагину папку с составными функциями, и эти функции также станут доступными глобально. Плагин создаёт файл .d.ts, поэтому TypeScript и редактор по-прежнему понимают их.

AutoImport({
  imports: ['vue'],
  dirs: ['src/composables'], // auto-import useFoo, useBar
  dts: 'src/auto-imports.d.ts'
})

// in a component, no import needed:
// const x = ref(0); const { user } = useAuth()

unplugin-vue-components

unplugin-vue-components импортирует и регистрирует компоненты по мере необходимости: добавьте <MyButton /> в шаблон, и плагин импортирует его автоматически. Он также удаляет из пакета неиспользуемые компоненты.

import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      dirs: ['src/components'],
      dts: 'src/components.d.ts'
    })
  ]
})

Механизмы определения компонентов библиотек интерфейса

Плагин компонентов поддерживает механизмы определения для популярных библиотек интерфейса (Element Plus, Vuetify, Naive UI), автоматически импортируя их компоненты и стили при использовании — без ручной регистрации.

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

Components({
  resolvers: [ElementPlusResolver()]
})
// <el-button> now works with no import

vite-plugin-inspect

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

import Inspect from 'vite-plugin-inspect'

export default defineConfig({
  plugins: [Inspect()]
})
// visit http://localhost:5173/__inspect/ in dev

Изучение конвейера преобразований

В интерфейсе Inspect выберите модуль и пройдите по преобразованиям каждого плагина. Например, можно увидеть, как SFC Vue разделяется на части рендеринга и скрипта и как автоматический импорт добавляет код, — это помогает точно определить неправильно работающие плагины.

Визуализатор пакета

Чтобы понять размер пакета в рабочей сборке, используйте плагин-визуализатор, например rollup-plugin-visualizer. После сборки он создаёт интерактивную древовидную карту содержимого каждого фрагмента.

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

export default defineConfig({
  plugins: [
    visualizer({ open: true, filename: 'stats.html' })
  ]
})

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

С помощью древовидной карты находите слишком крупные зависимости и дублирующиеся пакеты. Распространённые решения: загружать тяжёлые маршруты и компоненты по требованию, переходить на более лёгкие библиотеки или настроить manualChunks, чтобы разделить код сторонних библиотек.

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        vendor: ['vue', 'vue-router', 'pinia']
      }
    }
  }
}

Совместное использование плагинов

Эти плагины хорошо сочетаются. Типичная конфигурация Vue объединяет автоматический импорт, компоненты, Inspect (только в режиме разработки) и визуализатор (только при сборке), обеспечивая наиболее удобный рабочий процесс.

plugins: [
  vue(),
  AutoImport({ imports: ['vue', 'vue-router'] }),
  Components({ dirs: ['src/components'] }),
  Inspect(),
  visualizer({ filename: 'stats.html' })
]

Файлы d.ts и игнорирование в Git

Плагины автоматического импорта и компонентов создают файлы .d.ts. Решите, добавлять ли их в репозиторий (это помогает CI выполнять проверку типов без сборки) или исключать их из Git (они создаются заново при запуске разработки). В любом случае включите их в список включаемых файлов tsconfig.

Быстрая проверка

Проверьте, насколько хорошо Вы поняли экосистему инструментов Vite.

Итоги

Вы узнали об экосистеме инструментов Vite:

  • unplugin-auto-import — автоматический импорт API Vue и составных функций;
  • unplugin-vue-components — автоматический импорт и регистрация компонентов с поддержкой механизмов определения библиотек интерфейса;
  • vite-plugin-inspect — просмотр того, как плагины преобразуют каждый модуль;
  • визуализатор пакета — древовидная карта содержимого фрагментов, помогающая оптимизировать приложение;
  • эти плагины объединяются в удобный рабочий процесс разработки и сборки Vue.

Часто задаваемые вопросы

Урок «Экосистема Vite: плагины и инструменты» бесплатный?

Да — полный текст урока «Экосистема Vite: плагины и инструменты» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.

Чему я научусь в уроке «Экосистема Vite: плагины и инструменты»?

Экосистема unplugin, vite-plugin-vue, vite-plugin-inspect и vite-bundle-visualizer Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Экосистема Vite: плагины и инструменты»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Режим Vue Vapor: оптимизация на этапе компиляции
  2. Экосистема Vite: плагины и инструменты
  3. Макросы Vue и предложения сообщества
  4. Как выбрать подходящий стек Vue для 2025 года и далее
← Назад к Vue Academy