Ce este Code Splitting?

Tehnica de impartire a codului JavaScript in bucati mai mici incarcate la cerere

Definiție Code Splitting

Code splitting imparte codul JavaScript al site-ului in mai multe fisiere mici, fiecare incarcat doar cand este necesar. In loc sa descarci tot codul site-ului pe prima pagina (un singur bundle mare), descarci doar ce e nevoie acum. Reduce TBT si imbunatateste INP. Unelte ca webpack si Vite suporta code splitting automat.

De ce contează Code Splitting

Fara code splitting, browserul trebuie sa descarce, parseze si execute intregul bundle JavaScript al aplicatiei — adesea 1-5MB — inainte ca pagina sa devina interactiva. Code splitting imparte acest monolit in fragmente (chunks) incarcate la cerere: pagina de contact nu descarca JavaScript-ul de la pagina de checkout. Aceasta tehnica poate reduce TBT-ul cu 50-70% pe paginile individuale.

Cum verifici Code Splitting

Auditul SoftAudit analizeaza fisierele JavaScript incarcate pe pagina, masoara dimensiunea totala si identifica modulele neutilizate prin compararea codului incarcat cu cel executat. Raportul evalueaza daca bundler-ul (Webpack, Vite, Rollup) implementeaza code splitting si recomanda puncte de impartire optime.

Greșeli frecvente

Crearea de prea multe chunk-uri mici (sub 10KB fiecare) genereaza zeci de cereri HTTP care, chiar cu HTTP/2, introduc overhead de headers si latenta. La polul opus, un chunk de 500KB care contine o biblioteca partajata intre pagini pierde beneficiul code splitting-ului deoarece este incarcat practic pe orice pagina.

Bune practici

Configureaza dynamic import() pe rutele aplicatiei pentru a genera un chunk per pagina. Grupeaza librariile third-party mari (React, Lodash, Moment.js) in chunk-uri separate care beneficiaza de cache pe termen lung. Dimensiunea ideala per chunk este 50-200KB comprimat, iar chunk-urile partajate trebuie sa contina doar codul folosit pe minim 2 pagini.