Bagaimanakah Suspense dan React.lazy berfungsi untuk code splitting?

Question

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.