Frontend Academy · Lekcja

Vite: system wtyczek i tryb SSR

Napisze Pan/Pani wtyczkę Vite z hookami transform i load, zintegruje wtyczki innych firm i skonfiguruje Vite do renderowania po stronie serwera za pomocą opcji ssrBuild.

Lekcja 1 z 414 kroki

Vite: system wtyczek i tryb SSR to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Dlaczego Vite wygrał

Vite (po francusku „szybko”) został stworzony przez Evana You. W środowisku deweloperskim udostępnia niebundlowane pliki źródłowe za pomocą natywnych modułów ES, co zapewnia natychmiastowe uruchomienie na zimno. W produkcji używa Rollup do tworzenia bundla. Środowisko programistyczne jest znacznie szybsze niż w Webpacku.

Jak działa serwer deweloperski Vite

Nowoczesne przeglądarki natywnie obsługują moduły ES. Vite udostępnia pliki źródłowe bez zmian, przekształcając TypeScript/JSX na żądanie. Brak bundlowania oznacza brak oczekiwania podczas uruchamiania na zimno.

Hot Module Replacement

HMR zastępuje moduły bez przeładowywania strony. HMR w Vite opiera się na ESM i działa znacznie szybciej niż rozwiązanie Webpacka. Większość frameworków (React, Vue, Svelte) integruje się z nim, aby aktualizować komponenty z zachowaniem ich stanu.

Podstawy konfiguracji Vite

Konfigurację przeprowadza się w pliku vite.config.ts znajdującym się w katalogu głównym projektu.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: { port: 5173 },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom']
        }
      }
    }
  }
});

System wtyczek

Wtyczki Vite są rozszerzeniem wtyczek Rollup i udostępniają dodatkowe hooki dla serwera deweloperskiego. Wtyczka jest obiektem albo funkcją, która zwraca taki obiekt, zawierającym nazwane hooki.

// myPlugin.ts
export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (!id.endsWith('.mdx')) return null;
      // transform MDX to JS:
      return { code: compileMdx(code), map: null };
    },
    handleHotUpdate(ctx) {
      // react to file changes
    }
  };
}

// vite.config.ts
import myPlugin from './myPlugin';
export default { plugins: [myPlugin()] };

Najważniejsze hooki

transform(code, id): modyfikuje zawartość pliku (na przykład kompiluje MDX lub wstrzykuje zmienne środowiskowe). load(id): dostarcza zawartość dla modułów wirtualnych. resolveId(source): dostosowuje rozwiązywanie modułów. configureServer(server): dodaje middleware do serwera deweloperskiego.

Popularne wtyczki

@vitejs/plugin-react (React + Fast Refresh). @vitejs/plugin-vue. vite-plugin-pwa. vite-plugin-svgr (importowanie plików SVG jako komponentów). vite-plugin-checker (TypeScript / ESLint w nakładce). vite-plugin-mkcert (lokalny HTTPS).

Tryb SSR Vite

Vite obsługuje renderowanie po stronie serwera za pomocą niskopoziomowych mechanizmów. Frameworki takie jak Nuxt, SvelteKit, Remix i Astro korzystają z tych mechanizmów. W przypadku własnego SSR należy skorzystać z przewodnika SSR Vite.

// server.ts
import { createServer } from 'vite';

const vite = await createServer({
  server: { middlewareMode: true },
  appType: 'custom'
});

express()
  .use(vite.middlewares)
  .use('*', async (req, res) => {
    const url = req.originalUrl;
    let template = await readFile('index.html', 'utf-8');
    template = await vite.transformIndexHtml(url, template);
    const { render } = await vite.ssrLoadModule('/src/entry-server.ts');
    const appHtml = await render(url);
    res.send(template.replace('<!--app-html-->', appHtml));
  });

Kompilacja dla SSR

Potrzebne są dwa buildy: klienta i serwera. Polecenie vite build --ssr entry-server.ts tworzy bundel serwera.

// package.json
"scripts": {
  "build:client": "vite build",
  "build:server": "vite build --ssr src/entry-server.ts",
  "build": "npm run build:client && npm run build:server"
}

Zmienne środowiskowe

import.meta.env.MODE przyjmuje wartość 'development' lub 'production'. Własne zmienne z prefiksem VITE_ są udostępniane kodowi klienta.

Obsługa CSS

Vite obsługuje CSS, moduły CSS (foo.module.css), PostCSS (automatycznie wykrywa postcss.config.js) oraz preprocesory CSS (Sass, Less, Stylus) bez dodatkowej konfiguracji. Wtyczki mogą wstrzykiwać krytyczny CSS.

Vite a Webpack i Turbopack

Vite: środowisko deweloperskie oparte na ESM, buildy Rollup i szeroki ekosystem. Webpack: duży starszy bundler, bardziej konfigurowalny, ale wolniejszy. Turbopack (Vercel): oparty na Rust, zgodny z Webpackiem, obecnie dołączony do Next. W nowych projektach: Vite dla SPA, Next/Turbopack dla projektów opartych na Next.

Szybkie sprawdzenie

Dlaczego serwer deweloperski Vite uruchamia się na zimno znacznie szybciej niż serwer Webpacka?

Odpowiedz w interaktywnej lekcji

Podsumowanie: Vite

Serwer deweloperski oparty na ESM zapewnia natychmiastowe uruchomienie na zimno i szybkie HMR. W produkcji używany jest Rollup. Wtyczki rozszerzają hooki Rollup (transform, load, resolveId), a także dodają hooki właściwe dla Vite (configureServer, handleHotUpdate). Tryb SSR jest dostępny przez createServer i middlewareMode; kompilację wykonuje się z opcją --ssr. Dostępne są wtyczki PWA, MDX, SVGR i mkcert. Zmienne środowiskowe obsługuje się za pomocą import.meta.env. Moduły CSS, PostCSS i preprocesory są wbudowane.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 41
Lekcje: 163

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Vite: system wtyczek i tryb SSR” jest bezpłatna?

Tak — pełny tekst „Vite: system wtyczek i tryb SSR” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Vite: system wtyczek i tryb SSR”?

Napisze Pan/Pani wtyczkę Vite z hookami transform i load, zintegruje wtyczki innych firm i skonfiguruje Vite do renderowania po stronie serwera za pomocą opcji ssrBuild. Ćwiczysz Frontend 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ąć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend 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 1 z 4.

Ile czasu zajmuje lekcja „Vite: system wtyczek i tryb SSR”?

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 Frontend Academy?

Tak. Każda lekcja Frontend 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

← Powrót do Frontend Academy