Hogyan működik a Suspense és a React.lazy a kódfelosztáshoz?

Question

Accepted Answer

**`React.lazy`** egy komponens JavaScript csomagját **igény szerinti** módon tölti be (csak akkor, amikor először renderelődik). **`Suspense`** egy tartalék felhasználói felületet mutat, miközben bármelyik lusta (vagy adatfüggesztő) gyermek még mindig betöltődik. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Miért fontos: kisebb kezdeti terhelés Kódfelosztás nélkül a böngésző az **egész** alkalmazást (beleértve a nehéz diagramkészítési könyvtárat) letölti, mielőtt bármit megjelenítene. Az `lazy` segítségével a `Chart` kódja a saját fájljába van osztva, és csak akkor kerül lekérésre, amikor a felhasználó valóban eljut rá – javítva a kezdeti betöltési időt és a Core Web Vitals-t. ## Hogyan hangol össze a Suspense Mikor a `Chart` felfüggeszthető (csomagja nem készült el), a React "szünetelteti" a fa adott részét, és helyette a legközelebbi `Suspense` tartalékot rendereli, majd az igazi komponenst lecseréli, miután betöltődött. Egy egyetlen határ több lusta gyermeket tud betölteni és egy tartalékot megjeleníteni: ```jsx }>

``` ## A kódfelosztáson túl A Suspense az **adatbetöltést** is koordinálja olyan keretrendszerekkel/könyvtárakkal, amelyek függőben lévő lekérésen "felfüggeszthetők", és párosul a **streaming SSR** (Next.js App Router) segítségével, hogy gyors héjat küldjön és lassabb részeket streameljenek. Helyezze el a határokat megfontoltan, hogy elkerülje a nagy, döbbenetesen nagy elrendezés váltásokat, amikor tartalom megjelenik.