Kódbontás
A kódbontás egy olyan technika, amely egy nagy JavaScript bundle-t kisebb darabokra bont, amelyek igény szerint töltődnek be, így a felhasználók csak az éppen megtekintett oldalhoz szükséges kódot töltik le.
A modern webalkalmazások JavaScript kódja több millió sorból állhat. Kódfelosztás nélkül ez a teljes kód egyetlen fájlba kerül, amelyet minden felhasználónak le kell töltenie, mielőtt az alkalmazás interaktívvá válna, még akkor is, ha csak egyetlen oldalt látogat meg. A kódfelosztás az alkalmazáscsomagot kisebb darabokra bontja útvonalak, komponensek vagy funkciók szerint.
Amikor a beállítások oldalára navigál, az a kód igény szerint töltődik be. A csak bizonyos funkciókban használt könyvtárak saját darabokba kerülnek. A kódfelosztásnak többféle megközelítése létezik.
A gyakorlatban
- Egy SaaS irányítópult az útvonalalapú kódfelosztással 3,2 MB-ról 450 KB-ra csökkentette a kezdeti JavaScript csomagot, így a bejelentkezési oldal 8 másodperc helyett 2 másodperc alatt töltődik be.
- Egy e-kereskedelmi oldal lusta betöltéssel töltötte be a termékértékelés komponenst (amely egy nehéz rich text szerkesztőt is tartalmazott), így 200 KB-ot takarított meg a termékoldal kezdeti betöltéséből.
- Egy Next.js alkalmazás automatikusan útvonalanként osztja fel a kódot, így az 50 oldalas alkalmazás kezdőlapja csak 120 KB JavaScriptet tölt be a teljes 4 MB helyett.
- Egy webalkalmazás külön darabba helyezte a diagramkönyvtárát, így azok a felhasználók, akik soha nem látogatják meg az analitikai irányítópultot, nem töltik le az 500 KB-os diagramkönyvtárat.
Nem biztos benne, hogy ez hogyan vonatkozik Önre?
Egy vezető mérnök bejárja az Ön webhelyét, keresési jelenlétét és azt, ahogyan a megkeresések eljutnak Önhöz, majd leírja az elsőként javítandó három dolgot. A dokumentumot mindenképpen megtartja.