Kaip veikia Suspense ir React.lazy kodo skaidymui?

Question

IT Interview Practice · Accepted Answer

**`React.lazy`** įkelia komponento JavaScript paketą **pagal poreikį** (tik kai jis pirmą kartą renderinamas). **`Suspense`** parodo atsarginę UI, kol bet kuris lėtas (arba duomenų atžvilgiu stabdomas) vaikas vis dar įkelia. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Kodėl tai svarbu: mažesnė pradinė apkrova Be kodo skaidymo, naršyklė atsisiunčia **visą** jūsų programą (įskaitant galingą diagramų biblioteką) prieš jums parodyti bet ką. Su `lazy`, `Chart` kodas yra padalytas į atskirą failą ir atsisiunčiamas tik tada, kai naudotojas jį pasiekia — gerindamas pradinės įkėlimo laiką ir Core Web Vitals. ## Kaip Suspense tai koordinuoja Kai `Chart` stabdomas (jo paketas nėra paruoštas), React "pristabdo" tą medžio dalį ir vietoje to renderina artimiausią `Suspense` atsarginę variantą, tada įdeda tikrąjį komponentą, kai jis įkels. Viena riba gali apvynioti kelis lėtus vaikus ir parodyti vieną atsarginį variantą: ```jsx }>

``` ## Daugiau nei kodo skaidymas Suspense taip pat koordinuoja **duomenų įkėlimą** su sistemomis/bibliotekomis, kurios "stabdo" laukiant gautos duomenų, ir jungiasi su **srautine SSR** (Next.js App Router) greitam apvalkui siųsti ir lėtesnes dalis srautu. Racionaliai nustatykite ribas, kad išvengtumėte didelių, apjungusių maketų pokyčių, kai turinio atsiranda.

Kodėl tai svarbu: mažesnė pradinė apkrova

Kaip Suspense tai koordinuoja

Daugiau nei kodo skaidymas

Susiję klausimai