Vite to narzędzie do budowania i uruchamiania projektów frontendowych, stworzone przez Evana You, autora Vue. W trybie deweloperskim serwuje moduły ES bezpośrednio do przeglądarki, dzięki czemu startuje niemal natychmiast, a do wersji produkcyjnej używa bundlera Rollup.
Dlaczego Vite jest szybki?
Klasyczne bundlery przed uruchomieniem budują całą aplikację. Vite wykorzystuje natywne moduły ES przeglądarki i przetwarza pliki na żądanie, więc czas startu nie rośnie z wielkością projektu. Zmiany w kodzie są odświeżane natychmiast dzięki wymianie modułów na gorąco (HMR).
Co potrafi?
Obsługuje TypeScript, JSX, CSS i preprocesory bez dodatkowej konfiguracji, a za pomocą wtyczek również frameworki takie jak React, Vue i Svelte. Wersja produkcyjna jest minifikowana, a kod dzielony na części. Dokumentacja jest dostępna na vite.dev.
Vite a Webpack
Webpack jest starszy, bardzo elastyczny i szeroko stosowany w istniejących projektach, ale wymaga więcej konfiguracji. Vite jest prostszy i szybszy w pracy, więc dla nowych projektów stał się często wyborem domyślnym.
Wybór tego rozwiązania wiąże się z decyzją, która z metod renderowania CSR, SSR, SSG i ISR najlepiej pasuje do projektu.
Zobacz w praktyce
CSR, SSR, SSG czy ISR? Porównanie metod renderowania 
Refaktoryzacja JavaScript – jak poprawić Interaction to Next Paint (INP) 
Jak debugować kod JavaScript i PHP krok po kroku