رد عمل کے ساتھ سست لوڈنگ کے لئے رہنما

تعارف

بڑی React ایپلی کیشنز تیار کرتے وقت، ہم عام طور پر بہت سی تصاویر اور ویڈیوز استعمال کرتے ہیں، فریق ثالث پیکجز/لائبریریاں انسٹال کرتے ہیں، API کال کرتے ہیں، اور بہت سی دوسری چیزیں کرتے ہیں۔ یہ قدرتی طور پر ہماری ایپلیکیشن کو لوڈ کرنے میں لگنے والے وقت کو بڑھاتا ہے اور اس کے نتیجے میں بڑے بنڈل سائز میں اضافہ ہوتا ہے، جو صارف کے خراب تجربے میں معاون ہوتا ہے۔ وہیں ہے۔ سست لوڈنگ جگہ میں آتا ہے. یہ ہمیں مواد کو لوڈ کرنے کے قابل بناتا ہے۔ عین وقت پر، اس سے پہلے کہ یہ ایپلی کیشن میں ظاہر ہوگا۔

ہم مواد کو پہلے سے لوڈ کرنے سے بچ سکتے ہیں جب تک کہ یہ نظر سے باہر ہے، اور تمام وسائل کو اس مواد پر مرکوز کر سکتے ہیں جو منظر میں ہے۔

اس گائیڈ میں، ہم استعمال کرنے کا طریقہ دیکھیں گے۔ React.lazy() اور React.Suspense سست لوڈنگ اور کوڈ اسپلٹنگ فنکشنلٹی کو لاگو کرنے کے لیے جو ہمیں کسی اضافی لائبریری کو انسٹال کرنے کی ضرورت کے بغیر کوڈ اسپلٹنگ کو ہینڈل کرنے کی اجازت دیتا ہے۔

سست لوڈنگ کیا ہے؟

جب ہم ایک React ویب ایپلیکیشن لانچ کرتے ہیں، تو یہ عام طور پر پوری ایپلیکیشن کو ایک ساتھ بنڈل کر دیتا ہے، جس میں ہمارے لیے پورے ویب ایپ کے صفحات، تصاویر، مواد اور بہت کچھ شامل ہوتا ہے، جس کے نتیجے میں ممکنہ طور پر لوڈ کا وقت سست ہوتا ہے اور مجموعی طور پر خراب کارکردگی، اس پر منحصر ہوتی ہے۔ اس وقت مواد اور انٹرنیٹ بینڈوتھ کا سائز۔

سست لوڈنگ ہمیں مخصوص اجزاء کو صرف اس وقت لوڈ کرنے کی اجازت دیتا ہے جب ان کی ضرورت ہو۔ عام طور پر، ہم بھی انجام دیتے ہیں کوڈ کی تقسیم منطقی اجزاء میں جو مواد کے ساتھ بھی سست ہو سکتے ہیں۔

مثال کے طور پر، اگر ہمارے پاس ایک ڈیش بورڈ صفحہ ہے جو کلک کرنے پر مختلف ذرائع سے بہت ساری معلومات دکھاتا ہے، تو ان اجزاء اور صفحات کو سستی سے بھرے رکھنا ہمیشہ بہتر ہے، لہذا وہ صرف اس وقت لوڈ ہوتے ہیں جب صارف کی ضرورت یا ضرورت ہو۔

نوٹ: کوڈ کے ایک بڑے بنڈل کو ایک سے زیادہ بنڈلوں میں تھوکنے کا عمل جسے بڑے سائز کے بنڈلوں سے وابستہ کارکردگی کے مسائل سے بچنے کے مجموعی مقصد کے ساتھ متحرک طور پر لوڈ کیا جا سکتا ہے۔ کوڈ کی تقسیم. یہ ہماری ایپ میں کوڈ کی مقدار کو کم کیے بغیر پورا ہوتا ہے۔

خلاصہ یہ کہ سست لوڈنگ ہمیں پرزوں یا عناصر کو ڈیمانڈ پر رینڈر کرنے کی اجازت دیتی ہے، ہماری ایپ کو زیادہ موثر بناتی ہے اور صارف کا بہتر تجربہ فراہم کرتی ہے۔

نوٹ: سنگل پیج ایپلی کیشنز (SPAs) ایک دستاویز/صفحہ کے اندر تمام صفحات اور مواد کو شامل کرنے کے لیے ڈیزائن کیا گیا ہے۔ یہی وجہ ہے کہ SPAs تیار کرتے وقت سست لوڈنگ خاص طور پر کام آتی ہے۔

رد عمل میں سست لوڈنگ کو کیسے نافذ کریں۔

اب تک، ہم نے دیکھا ہے کہ سست لوڈنگ کیا ہے اور اسے نافذ کرنا کیوں ضروری ہے۔ اب، آئیے دیکھتے ہیں کہ ہم اسے اپنی React ایپلی کیشنز میں کیسے لاگو کر سکتے ہیں، دو React فیچرز کا استعمال کرتے ہوئے جو کوڈ کی تقسیم اور سست لوڈنگ کو لاگو کرنا آسان بنا دیتے ہیں۔ React.lazy() اور رد عمل۔سسپنس.

React.lazy() ایک فنکشن ہے جو ہمیں رینڈر کرنے کی اجازت دیتا ہے۔ متحرک درآمدات باقاعدہ اجزاء کے طور پر اسی طرح. کے ساتھ ساتھ متحرک درآمدات کا استعمال کرنا React.lazy() اسکرین پر رینڈر ہونے سے پہلے ہمیں ایک جزو درآمد کرنے کے قابل بنائے گا۔ قابل غور بات یہ ہے کہ React.lazy() ایک فنکشن کو بطور دلیل قبول کرتا ہے - اس فنکشن کو ڈائنامک کال کرنا چاہیے۔ import() اس کے جسم میں.

React.Suspense ہمیں فال بیک کی وضاحت کرنے کے قابل بناتا ہے۔ پروپیک جو ایک پلیس ہولڈر مواد لیتا ہے جسے بطور استعمال کیا جائے گا۔ لوڈنگ اشارے جبکہ تمام سست اجزاء لوڈ ہو جاتے ہیں۔

آئیے یہ دیکھتے ہوئے شروع کرتے ہیں کہ ہم اپنے درآمد شدہ اجزاء میں سست لوڈنگ کو کیسے نافذ کر سکتے ہیں، اور پھر ہم اسے اپنے راستوں میں کیسے نافذ کر سکتے ہیں تاکہ صفحات اس وقت تک لوڈ نہ ہوں جب تک کہ ہم ان پر تشریف نہ لے جائیں۔

شروع

فرض کریں کہ ہمارے پاس ہماری React ایپلیکیشن ہے، اور ہم نے درآمد کیا ہے۔ 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() اس طرح استعمال کیا جاتا ہے a Promise چیز. یہ وعدہ ایک ایسے ماڈیول کو حل کرتا ہے جس میں ایک React جزو ہوتا ہے جسے ہم اس میں سست لوڈ کرنا چاہتے ہیں۔ 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;

اب تک، ہم نے دیکھا ہے کہ اپنے درآمد شدہ اجزاء میں سست لوڈنگ کو کیسے نافذ کیا جائے۔ اب، دیکھتے ہیں کہ React راؤٹر کے ساتھ روٹ کرتے وقت اسے اپنے روٹس میں کیسے نافذ کیا جائے۔

ری ایکٹ راؤٹر کے ساتھ سست لوڈنگ کو کیسے نافذ کریں۔

سست روٹنگ دراصل ان راستوں کے لیے ایک اچھا عمل ہے جن میں بہت زیادہ مواد ہوتا ہے اور یہ آپ کی ایپلیکیشن کے لوڈ ٹائم کو سست کر سکتا ہے۔ رد عمل کے راستوں کے لیے سست لوڈنگ کو لاگو کرنا تقریباً وہی ہے جو ہم نے پہلے کیا تھا جب متحرک طور پر درآمد شدہ اجزاء کو سست لوڈ کرنا تھا۔

سست لوڈنگ ری ایکٹ روٹس سے مراد متحرک طور پر کسی جزو کو صرف اس وقت درآمد کرنا ہے جب اس کی ضرورت ہو۔ مثال کے طور پر، کہتے ہیں کہ ہماری درخواست میں دو راستے ہیں اور دو اجزاء ان راستوں کی نمائندگی کرتے ہیں۔ اگر ہم مندرجہ ذیل طریقے سے متذکرہ روٹنگ کو لاگو کرتے ہیں، تو ہر جزو کو صرف اس وقت لوڈ کیا جائے گا جب ہم متعلقہ روٹ پر جائیں گے:

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;

نتیجہ

اس گائیڈ میں، ہم نے سیکھا کہ سست لوڈنگ اور کوڈ اسپلٹنگ کیا ہیں، انہیں کیسے نافذ کیا جائے، اور یہ کہ سست لوڈنگ کو لاگو کرنے کے لیے بہترین جگہ روٹس کے ساتھ ہے۔ یہ پورے صفحے کو ایک ساتھ پیش کرنے سے گریز کرتا ہے، جس کے نتیجے میں مواد کی بڑی مقدار والے صفحات کے ساتھ کام کرتے وقت لوڈ کا وقت کم ہو سکتا ہے۔