Rozdelenie kódu
Rozdelenie kódu je technika, ktorá rozdeľuje veľký JavaScriptový balík na menšie časti, ktoré sa načítavajú podľa potreby, takže používatelia sťahujú iba kód potrebný pre stránku, ktorú práve prehliadajú.
Moderné webové aplikácie môžu mať milióny riadkov JavaScriptu. Bez rozdelenia kódu sa všetok tento kód zbalí do jedného súboru, ktorý si musí každý používateľ stiahnuť predtým, než sa aplikácia stane interaktívnou, aj keď navštívi len jednu stránku. Rozdelenie kódu rozdeľuje balík aplikácie na menšie časti na základe trás, komponentov alebo funkcií.
Pri navigácii na stránku nastavení sa tento kód načíta podľa potreby. Knihovny používané iba v špecifických funkciách sú rozdelené do vlastných častí. Existuje niekoľko prístupov k rozdeleniu kódu.
V praxi
- Dashboard SaaS služby znížil svoj počiatočný balík JavaScriptu z 3,2 MB na 450 KB pomocou trásového rozdelenia kódu, čím sa stránka prihlásenia načítala za menej ako 2 sekundy namiesto 8
- E-shop použil načasované načítanie komponentu recenzií produktov (ktorý obsahoval ťažký editor bohatého textu), čím ušetril 200 KB pri počiatočnom načítaní stránky produktu
- Aplikácia Next.js automaticky rozdeľuje kód podľa trás, takže domovská stránka ich 50stránkovej aplikácie načíta iba 120 KB JavaScriptu namiesto celkových 4 MB
- Webová aplikácia oddelila svoju grafickú knižnicu do samostatnej časti, takže používatelia, ktorí nikdy nenavštívili analytický dashboard, si nestiahli 500 KB grafickej knižnice
Nie ste si istí, či sa to týka aj vás?
Senior inžinier prejde vaše stránky, vašu prítomnosť vo vyhľadávaní a spôsob, akým dotazy k vám prichádzajú, a potom zapíše tri veci, ktoré sa oplatí opraviť ako prvé. Dokument si necháte v každom prípade.