प्रतिक्रिया के साथ आलसी लोडिंग के लिए गाइड

परिचय

बड़े रिएक्ट एप्लिकेशन विकसित करते समय, हम आम तौर पर कई छवियों और वीडियो का उपयोग करते हैं, तीसरे पक्ष के पैकेज / पुस्तकालय स्थापित करते हैं, एपीआई कॉल करते हैं, और कई अन्य चीजें करते हैं। यह स्वाभाविक रूप से हमारे एप्लिकेशन को लोड करने में लगने वाले समय को बढ़ाता है और परिणामस्वरूप बड़े पैमाने पर बंडल आकार होता है, जो खराब उपयोगकर्ता अनुभव में योगदान देता है। वह है वहां धीरे लोड हो रहा है स्थान पर आ जाता है। यह हमें सामग्री लोड करने में सक्षम बनाता है सही समय पर, आवेदन में प्रदर्शित होने से ठीक पहले।

हम सामग्री के दृश्य से बाहर होने पर प्री-लोडिंग से बच सकते हैं, और सभी संसाधनों को उस सामग्री पर केंद्रित कर सकते हैं जो दृश्य में है।

इस गाइड में, हम देखेंगे कि कैसे उपयोग करें React.lazy() और React.Suspense आलसी लोडिंग और कोड विभाजन कार्यक्षमता को लागू करने के लिए जो हमें किसी अतिरिक्त पुस्तकालय को स्थापित करने की आवश्यकता के बिना कोड विभाजन को संभालने की अनुमति देता है।

आलसी लोडिंग क्या है?

जब हम एक रिएक्ट वेब एप्लिकेशन लॉन्च करते हैं, तो यह आमतौर पर एक ही बार में पूरे एप्लिकेशन को बंडल करता है, हमारे लिए संपूर्ण वेब ऐप पेज, चित्र, सामग्री, और बहुत कुछ सहित सब कुछ लोड करता है, जिसके परिणामस्वरूप संभावित रूप से धीमा लोड समय और समग्र खराब प्रदर्शन होता है। उस समय सामग्री का आकार और इंटरनेट बैंडविड्थ।

धीरे लोड हो रहा है हमें विशिष्ट घटकों को केवल तभी लोड करने की अनुमति देता है जब उनकी आवश्यकता होती है। आमतौर पर, हम प्रदर्शन भी करते हैं कोड विभाजन तार्किक घटकों में जो सामग्री के साथ-साथ आलसी भी हो सकते हैं।

उदाहरण के लिए, यदि हमारे पास एक डैशबोर्ड पृष्ठ है जो क्लिक करने पर विभिन्न स्रोतों से बहुत सारी जानकारी प्रदर्शित करता है, तो इन घटकों और पृष्ठों को आलसी-लोड रखना हमेशा सर्वोत्तम होता है, इसलिए वे केवल तभी लोड होते हैं जब उपयोगकर्ता की आवश्यकता या आवश्यकता होती है।

नोट: कोड के एक बड़े बंडल को कई बंडलों में थूकने की प्रक्रिया जिसे ओवरसाइज़्ड बंडलों से जुड़े प्रदर्शन के मुद्दों से बचने के समग्र लक्ष्य के साथ गतिशील रूप से लोड किया जा सकता है, के रूप में जाना जाता है कोड-बंटवारे. यह हमारे ऐप में कोड की मात्रा को कम किए बिना पूरा किया जाता है।

संक्षेप में, आलसी लोडिंग हमें मांग पर घटकों या तत्वों को प्रस्तुत करने की अनुमति देती है, जिससे हमारा ऐप अधिक कुशल हो जाता है और बेहतर उपयोगकर्ता अनुभव प्रदान करता है।

नोट: सिंगल पेज एप्लीकेशन (एसपीए) एक ही दस्तावेज़/पृष्ठ के भीतर सभी पृष्ठों और सामग्री को समाहित करने के लिए डिज़ाइन किए गए हैं। यही कारण है कि एसपीए विकसित करते समय आलसी लोडिंग विशेष रूप से आसान होती है।

प्रतिक्रिया में आलसी लोडिंग को कैसे लागू करें

अब तक, हमने देखा है कि आलसी लोडिंग क्या है और इसे लागू करना क्यों महत्वपूर्ण है। अब, आइए देखें कि हम इसे अपने रिएक्ट एप्लिकेशन में कैसे लागू कर सकते हैं, दो रिएक्ट सुविधाओं का उपयोग करके जो कोड-विभाजन और आलसी लोडिंग को लागू करना आसान बनाते हैं - प्रतिक्रिया। आलसी () और प्रतिक्रिया.सस्पेंस.

React.lazy() एक फ़ंक्शन है जो हमें प्रस्तुत करने की अनुमति देता है गतिशील आयात उसी तरह जैसे नियमित घटक। के साथ-साथ गतिशील आयात का उपयोग करना React.lazy() स्क्रीन पर प्रस्तुत होने से ठीक पहले हमें एक घटक आयात करने में सक्षम करेगा। ध्यान देने वाली एक महत्वपूर्ण बात यह है कि React.lazy() किसी फ़ंक्शन को तर्क के रूप में स्वीकार करता है - उस फ़ंक्शन को गतिशील कॉल करना चाहिए import() इसके शरीर में।

React.Suspense हमें फ़ॉलबैक निर्दिष्ट करने में सक्षम बनाता है टेक जो एक प्लेसहोल्डर सामग्री लेता है जिसका उपयोग a . के रूप में किया जाएगा लोडिंग संकेतक जबकि सभी आलसी घटक लोड हो जाते हैं।

आइए देखें कि हम अपने आयातित घटकों में आलसी लोडिंग को कैसे लागू कर सकते हैं, और फिर हम इसे अपने मार्गों में कैसे लागू कर सकते हैं ताकि पृष्ठ तब तक लोड न हों जब तक हम उन पर नेविगेट नहीं करते।

Getting Started

मान लीजिए कि हमारे पास हमारा रिएक्ट एप्लिकेशन है, और हमने आयात किया है 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 वस्तु। यह वादा एक मॉड्यूल के लिए हल करता है जिसमें एक रिएक्ट घटक होता है जिसे हम आलसी लोड करना चाहते हैं 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;

निष्कर्ष

इस गाइड में, हमने सीखा कि आलसी लोडिंग और कोड विभाजन क्या हैं, उन्हें कैसे लागू किया जाए, और आलसी लोडिंग को लागू करने के लिए सबसे अच्छी जगह मार्गों के साथ है। यह पूरे पृष्ठ को एक साथ प्रस्तुत करने से बचाता है, जिसके परिणामस्वरूप बड़ी मात्रा में सामग्री वाले पृष्ठों के साथ काम करते समय लोड समय धीमा हो सकता है।