Kako delujeta Suspense in React.lazy za delitev kode?

Question

Accepted Answer

**`React.lazy`** naloži bundle JavaScripta komponente **na zahtevo** (samo ko se prvič renderira). **`Suspense`** prikaže nadomestni vmesnik, medtem ko se kateri koli lazy (ali suspenzivni za podatke) otrok še vedno nalagal. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Zakaj je to pomembno Brez delitve kode brskalnik prenese **celoten** program (vključno s težko knjižnico grafikov) pred prikazom česar koli. Z `lazy` se koda `Chart` deli v svojo datoteko in se preuze samo, ko jo uporabnik dejansko doseže — to izboljša začetni čas nalaganja in Core Web Vitals. ## Kako Suspense to usklajuje Ko se `Chart` suspendira (njegov bundle ni pripravljen), React "pavzira" ta del drevesa in namesto tega renderira najbližji `Suspense` fallback, nato pa zamenja pravo komponento, ko se naloži. Ena meja lahko ovije več lazy otrok in prikaže en fallback: ```jsx }>

``` ## Onkraj delitve kode Suspense tudi usklajuje **nalaganje podatkov** s stavili/knjižnicami, ki se "suspenzivne" na čakajočem pridobivanju, in se poveže s **pretočnim SSR** (Next.js App Router) za pošiljanje hitrega lupine in pretakanjem počasnejših delov. Meje postavite premišljeno, da se izognete velikim, moteče spremembam postavitve, ko se vsebina pojavi.