Code splitting (dzielenie kodu) to technika, w której bundler zamiast jednego dużego pliku JavaScript tworzy wiele mniejszych części. Przeglądarka pobiera tylko te, które są potrzebne dla bieżącego widoku, a pozostałe ładuje później, na żądanie.
Jak się to robi?
Najczęściej za pomocą dynamicznego importu: const modul = await import('./wykres.js'). Bundler wydziela taki moduł do osobnego pliku i pobiera go dopiero przy wywołaniu. Frameworki, takie jak React i Next.js, dodają własne mechanizmy leniwego ładowania komponentów, a routery dzielą kod według podstron.
Korzyści
Mniejszy początkowy pakiet skraca czas ładowania i wpływa na wskaźniki Core Web Vitals. Elementy rzadko używane, jak edytory czy wykresy, nie obciążają pierwszej wizyty.
Na co uważać?
Zbyt drobny podział zwiększa liczbę żądań i opóźnia pojawienie się funkcji po kliknięciu. Warto z wyprzedzeniem pobierać części, które użytkownik prawdopodobnie otworzy, np. przez prefetch.