Čo je Code Splitting?

Čo je code splitting

Code splitting (po slovensky rozdelenie kódu) je optimalizačná technika, pri ktorej sa JavaScript bundle aplikácie rozdelí na menšie, nezávislé časti nazývané chunky. Každý chunk obsahuje kód pre konkrétnu stránku, funkciu alebo komponent a načíta sa až keď ho používateľ skutočne potrebuje.

Ako code splitting funguje

Moderné bundlery ako Webpack, Rollup a Vite automaticky rozdeľujú kód na základe:

• Dynamické importy — príkaz import() vytvorí nový chunk, ktorý sa načíta asynchrónne
• Route-based splitting — každá stránka (route) sa stane samostatným chunkom
• Vendor splitting — knižnice tretích strán (React, lodash) sa oddelia do spoločného chunka

Frameworky ako Next.js implementujú code splitting automaticky — každá stránka v adresári app/ sa stáva samostatným chunkom bez nutnosti manuálnej konfigurácie.

Výhody code splittingu

• Rýchlejšie prvé načítanie — prehliadač parsuje a vykoná menší objem JavaScriptu
• Efektívnejšie cachovanie — pri zmene jednej stránky sa invaliduje len jej chunk, nie celý bundle
• Lepšie TTI — menej JavaScriptu na spracovanie znamená rýchlejšiu interaktivitu