প্রতিক্রিয়া সহ অলস লোডিং গাইড

ভূমিকা

বড় রিঅ্যাক্ট অ্যাপ্লিকেশন ডেভেলপ করার সময়, আমরা সাধারণত অনেক ছবি এবং ভিডিও ব্যবহার করি, থার্ড-পার্টি প্যাকেজ/লাইব্রেরি ইন্সটল করি, API কল করি এবং অন্যান্য বিভিন্ন জিনিস করি। এটি স্বাভাবিকভাবেই আমাদের অ্যাপ্লিকেশন লোড করতে সময় বাড়ায় এবং একটি বিশাল বান্ডিল আকারে পরিণত হয়, যা একটি দুর্বল ব্যবহারকারীর অভিজ্ঞতায় অবদান রাখে। সেখানেই অলস লোডিং জায়গায় আসে। এটি আমাদের সামগ্রী লোড করতে সক্ষম করে ঠিক সময়ে, ঠিক আগে এটি অ্যাপ্লিকেশনে প্রদর্শিত হবে।

আমরা প্রি-লোডিং বিষয়বস্তু এড়াতে পারি যখন এটি এখনও দৃশ্যের বাইরে থাকে, এবং সমস্ত সংস্থানগুলি দৃশ্যমান সামগ্রীতে ফোকাস করতে পারি৷

এই নির্দেশিকাতে, আমরা কীভাবে ব্যবহার করব তা দেখব React.lazy() এবং React.Suspense অলস লোডিং এবং কোড স্প্লিটিং কার্যকারিতা বাস্তবায়ন করতে যা আমাদেরকে কোনো অতিরিক্ত লাইব্রেরি ইনস্টল করার প্রয়োজন ছাড়াই কোড স্প্লিটিং পরিচালনা করতে দেয়।

অলস লোডিং কি?

যখন আমরা একটি প্রতিক্রিয়া ওয়েব অ্যাপ্লিকেশন চালু করি, তখন এটি সাধারণত সমগ্র অ্যাপ্লিকেশনটিকে একসাথে বান্ডেল করে, সমগ্র ওয়েব অ্যাপ পৃষ্ঠা, ছবি, বিষয়বস্তু এবং আমাদের জন্য আরও অনেক কিছু সহ সবকিছু লোড করে, যার ফলে লোডের সময় ধীরগতির হয় এবং সামগ্রিকভাবে খারাপ কর্মক্ষমতা নির্ভর করে সেই সময়ে কন্টেন্ট এবং ইন্টারনেট ব্যান্ডউইথের আকার।

লোড হচ্ছে লোড হচ্ছে শুধুমাত্র যখন প্রয়োজন হয় তখনই আমাদের নির্দিষ্ট উপাদান লোড করতে দেয়। সাধারণত, আমরা সঞ্চালন কোড বিভাজন যৌক্তিক উপাদানগুলির মধ্যে যা সামগ্রীর সাথেও অলস লোড হতে পারে।

উদাহরণস্বরূপ, যদি আমাদের একটি ড্যাশবোর্ড পৃষ্ঠা থাকে যা ক্লিক করার সময় বিভিন্ন উত্স থেকে প্রচুর তথ্য প্রদর্শন করে, তবে এই উপাদানগুলি এবং পৃষ্ঠাগুলিকে অলস-লোড রাখা সর্বদা ভাল, তাই ব্যবহারকারীর প্রয়োজন বা প্রয়োজন হলেই সেগুলি লোড হয়৷

বিঃদ্রঃ: একাধিক বান্ডিলে কোডের একটি বড় বান্ডিল থুতু ফেলার প্রক্রিয়া যা গতিশীলভাবে লোড করা যেতে পারে বড় আকারের বান্ডিলের সাথে সম্পর্কিত কার্যকারিতা সমস্যাগুলি এড়ানোর সামগ্রিক লক্ষ্য হিসাবে পরিচিত কোড-বিভাজন. আমাদের অ্যাপে কোডের পরিমাণ কমানো ছাড়াই এটি সম্পন্ন করা হয়।

সংক্ষেপে, অলস লোডিং আমাদেরকে চাহিদা অনুযায়ী উপাদান বা উপাদান রেন্ডার করতে দেয়, আমাদের অ্যাপটিকে আরও দক্ষ করে তোলে এবং আরও ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করে।

বিঃদ্রঃ: একক পৃষ্ঠা অ্যাপ্লিকেশন (SPA) একটি একক নথি/পৃষ্ঠার মধ্যে সমস্ত পৃষ্ঠা এবং বিষয়বস্তু ধারণ করার জন্য ডিজাইন করা হয়েছে৷ এই কারণেই SPA তৈরি করার সময় অলস লোডিং বিশেষভাবে কাজে আসে।

প্রতিক্রিয়ায় অলস লোডিং কীভাবে প্রয়োগ করবেন

এখন পর্যন্ত, আমরা দেখেছি অলস লোডিং কী এবং কেন এটি বাস্তবায়ন করা গুরুত্বপূর্ণ। এখন, আসুন দেখি কিভাবে আমরা আমাদের প্রতিক্রিয়া অ্যাপ্লিকেশনগুলিতে এটি বাস্তবায়ন করতে পারি, দুটি প্রতিক্রিয়া বৈশিষ্ট্য ব্যবহার করে যা কোড-বিভাজন এবং অলস লোডিং বাস্তবায়ন করা সহজ করে তোলে – react.lazy() এবং প্রতিক্রিয়া.সাসপেন্স.

React.lazy() একটি ফাংশন যা আমাদের রেন্ডার করতে দেয় গতিশীল আমদানি নিয়মিত উপাদান হিসাবে একই ভাবে. পাশাপাশি গতিশীল আমদানি ব্যবহার করে React.lazy() এটি একটি স্ক্রিনে রেন্ডার হওয়ার ঠিক আগে একটি উপাদান আমদানি করতে আমাদের সক্ষম করবে। উল্লেখ্য একটি গুরুত্বপূর্ণ বিষয় যে React.lazy() একটি যুক্তি হিসাবে একটি ফাংশন গ্রহণ করে - যে ফাংশন গতিশীল কল করা আবশ্যক import() এর শরীরে।

React.Suspense ফলব্যাক নির্দিষ্ট করতে আমাদের সক্ষম করে ঠেকনা যা একটি স্থানধারক বিষয়বস্তু নেয় যা একটি হিসাবে ব্যবহার করা হবে লোডিং সূচক যখন সমস্ত অলস উপাদান লোড হয়.

আসুন আমরা কীভাবে আমাদের আমদানিকৃত উপাদানগুলিতে অলস লোডিং প্রয়োগ করতে পারি এবং তারপরে কীভাবে আমরা আমাদের রুটে এটি প্রয়োগ করতে পারি যাতে পৃষ্ঠাগুলি নেভিগেট না করা পর্যন্ত লোড না হয় তা দেখে শুরু করা যাক।

শুরু হচ্ছে

ধরুন আমাদের প্রতিক্রিয়া অ্যাপ্লিকেশন রয়েছে এবং আমরা আমদানি করেছি About মধ্যে উপাদান Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

আমরা এখন ব্যবহার করে অলস লোডিং বাস্তবায়ন করতে পারি React.lazy():

import React from 'react';


const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

বিঃদ্রঃ: React.lazy() এইভাবে ব্যবহার করে একটি রিটার্ন দেয় Promise বস্তু এই প্রতিশ্রুতিটি এমন একটি মডিউলের সমাধান করে যাতে একটি প্রতিক্রিয়া উপাদান রয়েছে যা আমরা অলস লোড করতে চাই default রপ্তানি।

আমরা ব্যবহার করে অলস লোডিং বাস্তবায়ন করেছি React.lazy(), কিন্তু উপরের কোডটি সর্বদা একটি নিক্ষেপ করবে ভুল বলছেন যে আমাদের “React component suspended while rendering, but no fallback UI was specified”. এটি দিয়ে উপাদান মোড়ানো দ্বারা সংশোধন করা যেতে পারে React.Suspenseএর fallbackz এবং ফলব্যাক প্রপস সংযুক্ত করা যেমন আমরা আগে ব্যাখ্যা করেছি:

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

বিঃদ্রঃ: মূল বিষয়বস্তু লোড হওয়ার আগে ফলব্যাক প্রপটি দেখানোর জন্য একটি উপাদান নিতে পারে।

উপরন্তু, আমরা সিদ্ধান্ত নিতে পারেন ধ্বংস কোড ক্লিনার এবং আরো পঠনযোগ্য করতে প্রতিক্রিয়া আমদানি করুন:

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

এখন পর্যন্ত, আমরা দেখেছি কিভাবে আমাদের আমদানিকৃত উপাদানগুলিতে অলস লোডিং প্রয়োগ করা যায়। এখন, রিঅ্যাক্ট রাউটার দিয়ে রাউটিং করার সময় আমাদের রুটে কীভাবে এটি প্রয়োগ করা যায় তা দেখা যাক।

প্রতিক্রিয়া রাউটার দিয়ে অলস লোডিং কীভাবে প্রয়োগ করবেন

অলস রাউটিং আসলে এমন রুটগুলির জন্য একটি ভাল অনুশীলন যেখানে প্রচুর সামগ্রী রয়েছে এবং এটি আপনার অ্যাপ্লিকেশনের লোডের সময়কে ধীর করে দিতে পারে। রিঅ্যাক্ট রুটের জন্য অলস লোডিং প্রয়োগ করা প্রায় একই রকম যা আমরা আগে করেছি যখন অলসভাবে গতিশীলভাবে আমদানি করা উপাদান লোড করা হয়।

অলস লোডিং রিঅ্যাক্ট রুট বলতে ডায়নামিকভাবে কোনো উপাদান আমদানি করাকে বোঝায় যখন এটি প্রয়োজন হয়। উদাহরণস্বরূপ, বলুন আমাদের অ্যাপ্লিকেশনটিতে দুটি রুট রয়েছে এবং দুটি উপাদান সেই রুটগুলিকে উপস্থাপন করে। যদি আমরা নিম্নলিখিত উপায়ে উল্লিখিত রাউটিং বাস্তবায়ন করি, প্রতিটি উপাদান শুধুমাত্র তখনই লোড হবে যখন আমরা সংশ্লিষ্ট রুটে নেভিগেট করব:

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

উপসংহার

এই নির্দেশিকাটিতে, আমরা শিখেছি অলস লোডিং এবং কোড স্প্লিটিং কী, কীভাবে সেগুলি বাস্তবায়ন করতে হয় এবং অলস লোডিং বাস্তবায়নের সর্বোত্তম জায়গা হল রুটগুলির সাথে৷ এটি একবারে পুরো পৃষ্ঠাটিকে রেন্ডার করা এড়িয়ে যায়, যার ফলে প্রচুর পরিমাণে সামগ্রী সহ পৃষ্ঠাগুলির সাথে কাজ করার সময় একটি ধীর লোড সময় হতে পারে৷