Conas a oibríonn Suspense agus React.lazy do scartadh cód?

Question

Accepted Answer

**`React.lazy`** is ea a loádann bundle JavaScript comhpháirt **ar éileamh** (ach amháin nuair a renders sé den chéad uair). **`Suspense`** a thaispeáint UI faillí agus fad atá aon leanbh líofa (nó fionrú sonraí) fós á bhualadh. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Cén fáth a bhíonn sé i gceist: ualach tosaigh níos lú Gan scartadh cód, níonn an brabhsálaí do **iomlán** aip a íoslódáil (lena n-áirítear an leabharlann ghraf throm) sula bhfuil aon rud le feiceáil. Le `lazy`, is gné de comhad a bhriseadh `Chart` agus gur fhéadfar a dhul i ndiaidh nach dtí an úsáideoir go fírinneach ann — ag feabhas an ama ualach tosaigh agus Core Web Vitals. ## Conas a dhéanann Suspense a chomhordú Nuair a dhéanann `Chart` fionrú (níl a bundle réidh), React "cuireann ar staonadh" an chuid sin den spré agus a léiríonn an faillí `Suspense` is gaire, ansin cuireann an ghnáthchomhpháirt isteach nuair a loádann sé. Is féidir le teorainn amháin a ghaofar roinnt leanaí líofa agus a thaispeáint faillí amháin: ```jsx }>

``` ## Taobh thall de scartadh cód Cuireann Suspense ar aghaidh **sonraí a bhualadh** le creat-oibre/leabharlanna a "fionraíonn" ar iarratas foluain, agus cumasc le **sruthú SSR** (Next.js App Router) chun an blaosc gasta a sheoladh agus codanna moille a shruthú isteach. Cuir teorainneacha ar dhóigh thuisceanach chun a sheachaint ualach leagan leathan, mothaitheach nuair a ghealadh ábhar isteach.