Bundler (np. Webpack, Vite, esbuild) to narzędzie, które łączy moduły JavaScript, style i zasoby w zoptymalizowane pliki gotowe do publikacji. Przy okazji minifikuje kod i usuwa nieużywane fragmenty.
Co robi bundler?
Analizuje zależności między plikami, łączy je w paczki (bundle), transpiluje nowoczesny kod do starszych wersji języka i minifikuje wynik. Dzięki temu przeglądarka pobiera mniej plików.
Tree shaking i podział kodu
Tree shaking usuwa nieużywane fragmenty bibliotek, a podział kodu (code splitting) ładuje części aplikacji dopiero wtedy, gdy są potrzebne. Oba mechanizmy zmniejszają rozmiar skryptów.
Webpack czy Vite?
Webpack jest dojrzały i bardzo konfigurowalny, a Vite ma szybki serwer deweloperski i prostszą konfigurację. Nowe projekty często zaczynają od Vite.
Kiedy bundler nie jest potrzebny?
Przy prostych stronach z kilkoma skryptami bundler bywa zbędny, a natywne moduły ES i HTTP/2 radzą sobie z niewielką liczbą plików. Staje się potrzebny, gdy projekt ma wiele zależności z npm, korzysta z TypeScripta, JSX lub Sass albo wymaga optymalizacji pod produkcję. Konfigurację warto zachować możliwie prostą, bo rozbudowane pliki konfiguracyjne szybko stają się długiem technologicznym.