0Pricing
Frontend Academy · Lekcja

Vite: serwer deweloperski i build

Proszę uruchomić projekt Vite, korzystać z jego serwera deweloperskiego z natychmiastowym HMR, uruchomić polecenie build oraz wyświetlić wynik produkcyjny w trybie podglądu.

Vite: serwer deweloperski i build to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 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.

Czym jest Vite

Vite to narzędzie nowej generacji do budowania frontendu, stworzone przez Evana You (twórcę Vue). Udostępnia niezwykle szybki serwer deweloperski korzystający z natywnego ESM i esbuild, a także produkcyjny build oparty na Rollup.

Tworzenie projektu Vite

npm create vite@latest tworzy szkielet nowego projektu. Należy wybrać framework (Vanilla, React, Vue, Svelte, Preact, Lit) oraz wariant (JS lub TS). Projekt jest od razu gotowy — nie wymaga konfiguracji.

npm create vite@latest my-app
# Choose: React + TypeScript

cd my-app
npm install
npm run dev  # dev server on localhost:5173

Serwer deweloperski — natychmiastowy start

Vite nie tworzy bundla podczas pracy deweloperskiej. Udostępnia każdy plik jako natywny moduł ESM. Przeglądarka importuje je bezpośrednio. Brak bundlowania oznacza zimny start trwający poniżej 100 ms, niezależnie od rozmiaru projektu. Podczas HMR ponownie kompilowane są tylko zmienione pliki.

HMR — Hot Module Replacement

HMR w Vite zastępuje tylko zmieniony moduł w działającej aplikacji, bez pełnego przeładowania strony. W przypadku React z @vitejs/plugin-react stan komponentu jest zachowywany podczas HMR. Zmiany pojawiają się w czasie krótszym niż 50 ms.

vite.config.js / vite.config.ts

Vite konfiguruje się za pomocą pliku vite.config.ts. Typowe opcje obejmują wtyczki, aliasy resolve, port serwera, proxy dla wywołań API oraz katalog wyjściowy buildu.

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
});

Zmienne środowiskowe

Vite udostępnia zmienne środowiskowe z prefiksem VITE_ za pośrednictwem import.meta.env. Należy przechowywać je w plikach .env, .env.development i .env.production. Nigdy nie należy oznaczać sekretów prefiksem VITE_ — zostaną dołączone do bundla przeglądarkowego.

# .env
VITE_API_URL=https://api.example.com

# In code:
const apiUrl = import.meta.env.VITE_API_URL;

npm run build — produkcyjny build

npm run build wywołuje pod spodem Rollup, aby zbudować, zminimalizować i wykonać tree shaking aplikacji. Wynik trafia do folderu dist/ i jest gotowy do wdrożenia.

npm run build
# Output:
# dist/
#   index.html
#   assets/
#     index-a1b2c3.js  (minified app bundle)
#     vendor-d4e5f6.js  (node_modules chunk)
#     index-7h8i9j.css

Analizowanie bundla

Należy użyć vite-bundle-visualizer lub rollup-plugin-visualizer, aby wygenerować mapę drzewa zawartości bundla. Pomaga to zidentyfikować zbyt duże zależności i możliwości leniwego ładowania.

npm run preview

npm run preview lokalnie udostępnia produkcyjny build dist/. Należy użyć tego polecenia, aby zweryfikować produkcyjny build przed wdrożeniem — wykrywa ono problemy, które pojawiają się tylko wtedy, gdy aplikacja nie działa w trybie deweloperskim.

Dzielenie kodu w Vite

Dynamiczne instrukcje import() automatycznie tworzą osobne chunki. Trasy lazy w React Router oraz defineAsyncComponent w Vue również uruchamiają dzielenie kodu. Należy sprawdzić rozmiary chunków w wynikach buildu.

Vite dla bibliotek

Tryb biblioteki Vite (build.lib) buduje biblioteki npm, generując formaty ESM i CJS. Należy określić listę external, aby zapobiec bundlowaniu zależności peer, takich jak React.

Szybki test

Dlaczego serwer deweloperski Vite jest szybszy niż serwer webpack?

Podsumowanie: Vite

npm create vite@latest natychmiast tworzy szkielet projektu. Serwer deweloperski korzysta z natywnego ESM — bez bundlowania, z natychmiastowym HMR. vite.config.ts służy do konfiguracji wtyczek, aliasów i proxy. Prefiks VITE_ oznacza zmienne środowiskowe bezpieczne dla przeglądarki. npm run build tworzy zoptymalizowany bundle Rollup. npm run preview lokalnie testuje produkcyjny build.

Często zadawane pytania

Czy lekcja „Vite: serwer deweloperski i build” jest bezpłatna?

Tak — pełny tekst „Vite: serwer deweloperski i build” 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: serwer deweloperski i build”?

Proszę uruchomić projekt Vite, korzystać z jego serwera deweloperskiego z natychmiastowym HMR, uruchomić polecenie build oraz wyświetlić wynik produkcyjny w trybie podglądu. Ć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 3 z 4.

Ile czasu zajmuje lekcja „Vite: serwer deweloperski i build”?

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

  1. Moduły ES: import, export i dynamic import
  2. npm i package.json: zależności i skrypty
  3. Vite: serwer deweloperski i build
  4. Koncepcje bundlowania: tree shaking i code splitting
← Powrót do Frontend Academy