Bagaimanakah Suspense dan React.lazy berfungsi untuk code splitting?

Question

IT Interview Practice · Accepted Answer

**`React.lazy`** memuatkan bundle JavaScript sesuatu komponen **atas permintaan** (hanya apabila ia mula-mula di-render). **`Suspense`** memaparkan UI fallback semasa mana-mana anak yang lazy (atau yang menggantung data) masih sedang dimuatkan. ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## Mengapa ia penting: muatan awal yang lebih kecil Tanpa code splitting, pelayar memuat turun **keseluruhan** aplikasi anda (termasuk pustaka carta yang berat) sebelum memaparkan apa-apa. Dengan `lazy`, kod `Chart` dipisahkan ke dalam failnya sendiri dan diambil hanya apabila pengguna benar-benar sampai kepadanya — menambah baik masa muat awal dan Core Web Vitals. ## Bagaimana Suspense menyelaraskannya Apabila `Chart` menggantung (bundle-nya belum bersedia), React "menjedakan" bahagian pokok itu dan me-render fallback `Suspense` terdekat sebaliknya, kemudian menukar masuk komponen sebenar sebaik sahaja ia dimuatkan. Satu sempadan tunggal boleh membalut beberapa anak yang lazy dan memaparkan satu fallback: ```jsx }>

``` ## Melangkaui code splitting Suspense juga menyelaraskan **pemuatan data** dengan rangka kerja/pustaka yang "menggantung" pada pengambilan yang tertangguh, dan berpasangan dengan **streaming SSR** (Next.js App Router) untuk menghantar cangkerang yang pantas dan menstrim bahagian yang lebih perlahan masuk. Letakkan sempadan dengan teliti untuk mengelakkan anjakan susun atur yang besar dan mengejut apabila kandungan muncul.

Mengapa ia penting: muatan awal yang lebih kecil

Bagaimana Suspense menyelaraskannya

Melangkaui code splitting

Soalan berkaitan