35. Vite — narzędzie do budowania i dev server dla React

Vite — szybkie narzędzie do React

Vite to nowoczesny build tool dla projektów React. Dev server używa natywnych ES modules — start w milisekundach. Build produkcyjny używa Rollup z tree-shaking i code splitting. Zastąpił Create React App jako standard projektu React.

Vite jest standardem w 2025 roku. Każdy nowy projekt React to npm create vite@latest. Zrozumienie jak działa dev server, HMR i build produkcyjny ułatwia diagnozowanie problemów z projektem.

1. Wyjaśnić dlaczego Vite jest szybszy od Create React App
2. Opisać dev server — ESM, HMR, proxy
3. Omówić konfigurację vite.config.js
4. Opisać build produkcyjny — Rollup, chunki, optymalizacje

1. Dlaczego Vite jest szybki — ESM bez prebundlingu, on-demand loading
2. HMR — Hot Module Replacement, stan zachowany
3. vite.config.js — plugins, resolve.alias, server.proxy
4. Build produkcyjny — Rollup, minifikacja, tree-shaking, code splitting
5. Zmienne środowiskowe — .env, VITE_ prefix, import.meta.env

• Struktura minimalna

1. Wstęp — potrzeba build tooling, historia CRA
2. Rozdział 1: Dev server i HMR — dlaczego szybki
3. Rozdział 2: Konfiguracja — vite.config.js, zmienne
4. Rozdział 3: Build produkcyjny — optymalizacje
5. Podsumowanie
6. Bibliografia

Vite to standard toolingu React w 2025!

Porównaj czas startu dev serwera: Create React App 30 sekund vs Vite 0.3 sekundy. Te liczby robią wrażenie i dobrze ilustrują dlaczego Vite wygrał.