Si funksionojnë Suspense dhe React.lazy për ndarjen e kodit?

Question

Accepted Answer

**`React.lazy`** ngarkon bundle-in JavaScript të një komponenti **sipas kërkesës** (vetëm kur ai renderizuhet për herë të parë). **`Suspense`** shfaq një ndërfaqe fallback ndërsa ndonjë fëmijë lazy (ose i pezulluar në të dhëna) ende po ngarkohet. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Pse ka rëndësi Pa ndarje kodi, shfletuesi shkarkon **të gjithë** aplikacionin (përfshirë bibliotekën e rëndë të grafikëve) përpara se të shfaqë ndonjë gjë. Me `lazy`, kodi i `Chart` ndahet në skedarin e tij dhe ngarkohet vetëm kur përdoruesi në të vërtetë e arrin atë — duke përmirësuar kohën fillestare të ngarkimit dhe Core Web Vitals. ## Si Suspense e koordinon Kur `Chart` pezullohet (bundle-i i tij nuk është gati), React "ndal" atë pjesë të pemës dhe përkundrazi renderizoi fallback-un më të afërt të `Suspense`, më pas ndërron komponentin e vërtetë sapo të ngarkohet. Një kufizim i vetëm mund të mbështjellë disa fëmijë lazy dhe të shfaqë një fallback: ```jsx }>

``` ## Përtej ndarjes së kodit Suspense gjithashtu koordinon **ngarkimin e të dhënave** me korniza/biblioteka që "pezullohen" në një marrje në pritje, dhe bashkohet me **SSR-në e rrjedhshme** (Next.js App Router) për të dërguar një guaskë të shpejtë dhe për të transmetuar pjesë më të ngadalta. Vendosni kufijtë me kujdes për të shmangur ndryshimet e mëdha dhe shqetësuese të paraqitjes kur përmbajtja shfaqet.