Kuinka Suspense ja React.lazy toimivat koodin jakamiseen?

Question

Accepted Answer

**`React.lazy`** lataa komponentin JavaScript-bundlen **tarvittaessa** (vain kun se ensin renderöidään). **`Suspense`** näyttää varainta UI:ta, kun mikä tahansa lazy (tai data-suspending) lapsikomponentti on edelleen latautumassa. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Miksi sillä on merkitystä: pienempi alkuperäinen lataus Ilman koodin jakamista selain lataa **koko** sovelluksesi (mukaan lukien raskas kaaviokirjasto) ennen kuin näyttää mitään. `lazy` kanssa `Chart`-koodi jaetaan omaksi tiedostoksi ja haetaan vain silloin, kun käyttäjä todella saa sinne — parantaa alkuperäistä latausaikaa ja Core Web Vitals. ## Kuinka Suspense koordinoi sen Kun `Chart` keskeyttyy (sen bundle ei ole valmis), React "keskeyttää" sen osan puusta ja näyttää sen sijaan lähimmän `Suspense` varainnin, sitten vaihtaa todelliseen komponenttiin, kun se latautuu. Yksi raja voi kääriä useita lazy lapsia ja näyttää yhden varainnin: ```jsx }>

``` ## Koodin jakamisen ulkopuolella Suspense koordinoi myös **tietojen lataamista** kehysten/kirjastojen kanssa, jotka "keskeyttävät" odottavan haun, ja muodostaa parit **streaming SSR** kanssa (Next.js App Router) nopeana kuorina lähettämiseksi ja hitaampien osien suoratoistoksi. Sijoita rajat harkiten suurten, häiritsevien asettelun muutosten välttämiseksi sisällön ilmestyessä.