0Pricing
Vue Academy · Lekcja

Ekosystem Vite: wtyczki i narzędzia

Ekosystem unplugin, vite-plugin-vue, vite-plugin-inspect oraz vite-bundle-visualizer.

Ekosystem Vite: wtyczki i narzędzia to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Ekosystem pluginów Vite

System pluginów Vite (oparty na interfejsie Rollup i rozszerzony o hooki specyficzne dla Vite) napędza bogaty ekosystem. W projektach Vue kilka pluginów znacznie poprawia komfort pracy: automatyczne importy, automatyczna rejestracja komponentów, inspekcja transformacji i analiza bundla.

unplugin-auto-import

unplugin-auto-import automatycznie importuje często używane API (na przykład ref i computed z Vue, pomocnicze funkcje Routera i Pinia oraz własne composables), dzięki czemu mogą Państwo korzystać z nich bez pisania instrukcji importu.

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

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

Automatyczny import własnych composables

Wystarczy wskazać katalog z composables, aby jego funkcje również stały się globalnie dostępne. Plugin generuje plik .d.ts, dzięki czemu TypeScript i edytor nadal je rozpoznają.

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 automatycznie importuje i rejestruje komponenty na żądanie — wystarczy umieścić <MyButton /> w szablonie, a plugin zaimportuje go automatycznie. Usuwa również z bundla nieużywane komponenty.

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

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

Resolvery bibliotek UI

Plugin komponentów obsługuje resolvery popularnych bibliotek UI (Element Plus, Vuetify, Naive UI), automatycznie importując używane komponenty i style — bez ręcznej rejestracji.

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

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

vite-plugin-inspect

vite-plugin-inspect udostępnia interfejs, w którym można zobaczyć, jak każdy plugin przekształca kod w ramach potoku. Jest nieoceniony podczas debugowania przyczyn, dla których plik kończy w określonej postaci.

import Inspect from 'vite-plugin-inspect'

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

Odczytywanie potoku transformacji

W interfejsie Inspect wybierają Państwo moduł i przechodzą przez transformacje wykonywane przez kolejne pluginy. Można na przykład zobaczyć, jak Vue SFC jest dzielony na części render i script oraz jak auto-import wstrzykuje kod — co pozwala wskazać pluginy działające nieprawidłowo.

Wizualizator bundla

Aby zrozumieć rozmiar produkcyjnego bundla, należy użyć pluginu wizualizującego (na przykład rollup-plugin-visualizer). Po zakończeniu budowania generuje on interaktywną mapę drzewa pokazującą zawartość poszczególnych chunków.

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

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

Wykorzystanie informacji z wizualizatora

Mapa drzewa pomaga znaleźć zbyt duże zależności i zduplikowane pakiety. Typowe rozwiązania to leniwe ładowanie ciężkich tras i komponentów, zamiana bibliotek na lżejsze albo skonfigurowanie manualChunks w celu podzielenia kodu dostawców.

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

Łączenie pluginów

Te pluginy dobrze ze sobą współpracują. Typowa konfiguracja Vue łączy automatyczne importy, komponenty, Inspect (tylko w środowisku deweloperskim) oraz wizualizator (tylko podczas budowania), zapewniając płynny proces pracy.

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

Pamiętaj o plikach d.ts i .gitignore

Pluginy automatycznego importu i komponentów generują pliki .d.ts. Należy zdecydować, czy będą one zatwierdzane w repozytorium (ułatwia to sprawdzanie typów przez CI bez budowania), czy dodane do gitignore (są wtedy generowane ponownie przy uruchomieniu środowiska deweloperskiego). W obu przypadkach należy uwzględnić je w sekcji tsconfig includes.

Szybkie sprawdzenie

Proszę sprawdzić swoją wiedzę na temat ekosystemu narzędzi Vite.

Podsumowanie

Poznali Państwo ekosystem narzędzi Vite:

  • unplugin-auto-import — automatyczny import API Vue i composables
  • unplugin-vue-components — automatyczny import i rejestracja komponentów z resolverami bibliotek UI
  • vite-plugin-inspect — podgląd sposobu transformacji każdego modułu przez pluginy
  • wizualizator bundla — mapa drzewa zawartości chunków ułatwiająca optymalizację
  • Pluginy te można połączyć w płynny proces tworzenia i budowania aplikacji Vue

Często zadawane pytania

Czy lekcja „Ekosystem Vite: wtyczki i narzędzia” jest bezpłatna?

Tak — pełny tekst „Ekosystem Vite: wtyczki i narzędzia” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Ekosystem Vite: wtyczki i narzędzia”?

Ekosystem unplugin, vite-plugin-vue, vite-plugin-inspect oraz vite-bundle-visualizer. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Ekosystem Vite: wtyczki i narzędzia”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Vue Vapor Mode: optymalizacja w czasie kompilacji
  2. Ekosystem Vite: wtyczki i narzędzia
  3. Makra Vue i propozycje społeczności
  4. Wybór właściwego stosu Vue na rok 2025+
← Powrót do Vue Academy