Suspense এবং React.lazy কীভাবে কোড স্প্লিটিংয়ের জন্য কাজ করে?

Question

Accepted Answer

**`React.lazy`** একটি কম্পোনেন্টের JavaScript বান্ডেল **অন ডিমান্ডে** লোড করে (শুধুমাত্র যখন এটি প্রথমবার রেন্ডার হয়)। **`Suspense`** যে কোনো lazy (বা ডেটা-সাসপেন্ডিং) চাইল্ড এখনও লোড হচ্ছে তখন একটি ফলব্যাক UI প্রদর্শন করে। ```jsx const Chart = React.lazy(() => import("./Chart")); // separate bundle, loaded lazily function Dashboard() { return ( }> {/* shown until Chart's code arrives */} ); } ``` ## কেন এটি গুরুত্বপূর্ণ: ছোট প্রাথমিক লোড কোড স্প্লিটিং ছাড়া, ব্রাউজার কিছু দেখানোর আগে আপনার **সম্পূর্ণ** অ্যাপ (ভারী চার্টিং লাইব্রেরি সহ) ডাউনলোড করে। `lazy` দিয়ে, `Chart` এর কোড তার নিজস্ব ফাইলে বিভক্ত হয় এবং শুধুমাত্র যখন ব্যবহারকারী সেখানে পৌঁছায় তখন জেনে নেওয়া হয় — প্রাথমিক লোড সময় এবং Core Web Vitals উন্নত করে। ## Suspense কীভাবে এটি সমন্বয় করে যখন `Chart` সাসপেন্ড হয় (এর বান্ডেল প্রস্তুত নয়), React সেই অংশটি "পজ" করে এবং পরিবর্তে নিকটতম `Suspense` ফলব্যাক রেন্ডার করে, তারপর এটি লোড হওয়ার পরে বাস্তব কম্পোনেন্টে স্যুইচ করে। একটি একক সীমানা বেশ কয়েকটি lazy চাইল্ড মোড়াতে এবং একটি ফলব্যাক প্রদর্শন করতে পারে: ```jsx }>

``` ## কোড স্প্লিটিংয়ের বাইরে Suspense **ডেটা লোডিং**ও সমন্বয় করে ফ্রেমওয়ার্ক/লাইব্রেরিগুলির সাথে যা একটি পেন্ডিং ফেচে "সাসপেন্ড" করে, এবং **স্ট্রিমিং SSR** এর সাথে জোড়া দেয় (Next.js App Router) একটি দ্রুত শেল পাঠাতে এবং ধীর অংশগুলি স্ট্রিম করতে। বড়, বিরক্তিকর লেআউট শিফট এড়াতে সীমানা বুদ্ধিমত্তার সাথে স্থাপন করুন যখন সামগ্রী পপ ইন হয়।