আপনার ব্যবহারকারীদের কাছে আপনার প্রয়োজনের চেয়ে বেশি কোড পাঠানোর প্রয়োজন নেই, তাই এটি কখনই না ঘটে তা নিশ্চিত করতে আপনার বান্ডিলগুলিকে বিভক্ত করুন!
React.lazy পদ্ধতিটি গতিশীল আমদানি ব্যবহার করে একটি উপাদান স্তরে একটি প্রতিক্রিয়া অ্যাপ্লিকেশনকে কোড-বিভক্ত করা সহজ করে তোলে।
import React, { lazy } from 'react';
const AvatarComponent = lazy(() => import('./AvatarComponent'));
const DetailsComponent = () => (
<div>
<AvatarComponent />
</div>
)
কেন এই দরকারী?
একটি বড় প্রতিক্রিয়া অ্যাপ্লিকেশন সাধারণত অনেক উপাদান, ইউটিলিটি পদ্ধতি এবং তৃতীয় পক্ষের লাইব্রেরি নিয়ে গঠিত। যদি একটি অ্যাপ্লিকেশনের বিভিন্ন অংশ শুধুমাত্র প্রয়োজনের সময় লোড করার চেষ্টা না করা হয়, তবে জাভাস্ক্রিপ্টের একটি একক, বড় বান্ডিল আপনার ব্যবহারকারীরা প্রথম পৃষ্ঠা লোড করার সাথে সাথে তাদের কাছে পাঠানো হবে। এটি পৃষ্ঠার কার্যক্ষমতাকে উল্লেখযোগ্যভাবে প্রভাবিত করতে পারে।
React.lazy ফাংশন একটি অ্যাপ্লিকেশনের উপাদানগুলিকে জাভাস্ক্রিপ্টের আলাদা অংশে খুব কম লেগওয়ার্কের সাথে আলাদা করার একটি অন্তর্নির্মিত উপায় প্রদান করে। আপনি যখন এটিকে Suspense উপাদানের সাথে সংযুক্ত করবেন তখন আপনি লোডিং অবস্থার যত্ন নিতে পারবেন।
সাসপেন্স
ব্যবহারকারীদের কাছে একটি বৃহৎ জাভাস্ক্রিপ্ট পেলোড পাঠানোর সমস্যা হল পৃষ্ঠাটি লোড হওয়া শেষ হতে কতটা সময় লাগবে, বিশেষ করে দুর্বল ডিভাইস এবং নেটওয়ার্ক সংযোগে। এই কারণেই কোড বিভাজন এবং অলস লোডিং অত্যন্ত দরকারী।
যাইহোক, সর্বদা একটি সামান্য বিলম্ব হবে যা ব্যবহারকারীদের অনুভব করতে হবে যখন একটি কোড-বিভক্ত উপাদান নেটওয়ার্কে আনা হচ্ছে, তাই একটি দরকারী লোডিং অবস্থা প্রদর্শন করা গুরুত্বপূর্ণ। Suspense কম্পোনেন্টের সাথে React.lazy ব্যবহার করা এই সমস্যার সমাধান করতে সাহায্য করে।
import React, { lazy, Suspense } from 'react';
const AvatarComponent = lazy(() => import('./AvatarComponent'));
const renderLoader = () => <p>Loading</p>;
const DetailsComponent = () => (
<Suspense fallback={renderLoader()}>
<AvatarComponent />
</Suspense>
)
Suspense একটি fallback উপাদান গ্রহণ করে যা আপনাকে লোডিং অবস্থা হিসাবে যেকোনো প্রতিক্রিয়া উপাদান প্রদর্শন করতে দেয়। নিম্নলিখিত উদাহরণ দেখায় কিভাবে এটি কাজ করে। অবতারটি শুধুমাত্র তখনই রেন্ডার করা হয় যখন বোতামটি ক্লিক করা হয়, যেখানে সাসপেন্ড করা AvatarComponent জন্য প্রয়োজনীয় কোডটি পুনরুদ্ধার করার জন্য একটি অনুরোধ করা হয়। ইতিমধ্যে, ফলব্যাক লোডিং উপাদান দেখানো হয়েছে।
এখানে, AvatarComponent তৈরি করা কোডটি ছোট যার কারণে লোডিং স্পিনার শুধুমাত্র অল্প সময়ের জন্য দেখায়। বড় উপাদান লোড হতে অনেক বেশি সময় নিতে পারে, বিশেষ করে দুর্বল নেটওয়ার্ক সংযোগে।
এটি কীভাবে কাজ করে তা আরও ভালভাবে প্রদর্শন করতে:
- সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন
. - DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
- নেটওয়ার্ক ট্যাবে ক্লিক করুন।
- থ্রটলিং ড্রপডাউনে ক্লিক করুন, যা ডিফল্টরূপে নো থ্রটলিং সেট করা আছে। দ্রুত 3G নির্বাচন করুন।
- অ্যাপে ক্লিক মি বোতামে ক্লিক করুন।
লোডিং সূচকটি এখন আরও বেশি সময়ের জন্য দেখাবে। লক্ষ্য করুন কিভাবে AvatarComponent তৈরি করে এমন সমস্ত কোড একটি পৃথক খণ্ড হিসেবে আনা হয়।