हल: प्रतिक्रिया रूटर आलसी लोड

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

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));
 
function App() { 

  return ( 

    <Router> 

      <Suspense fallback={<div>Loading...</div>}>

        <Switch>  

          <Route exact path="/" component={Home} />  

          <Route path="/about" component={About} />  

          <Route path="/contact" component={Contact} />  

        </Switch>  

      </Suspense> 

    </Router>  ); } export default App;

1. आयात प्रतिक्रिया, {सस्पेंस} 'प्रतिक्रिया' से;
// यह लाइन रिएक्ट लाइब्रेरी और सस्पेंस घटक को रिएक्ट लाइब्रेरी से आयात करती है।

2. 'प्रतिक्रिया-राउटर-डोम' से {ब्राउज़र राउटर को राउटर, रूट, स्विच} के रूप में आयात करें;
// यह लाइन प्रतिक्रिया-राउटर-डोम लाइब्रेरी से ब्राउज़र राउटर, रूट और स्विच घटकों को आयात करती है।

3. const Home = React.lazy(() => import('./Home'));
// यह लाइन होम नामक एक स्थिरांक बनाती है जो रिएक्ट की आलसी लोडिंग सुविधा का उपयोग इस फ़ाइल (ऐप घटक) के समान निर्देशिका में एक फ़ाइल से होम नामक एक घटक को गतिशील रूप से आयात करने के लिए करती है।

4. कास्ट के बारे में = React.lazy(() => आयात('./के बारे में'));
// यह लाइन अबाउट नामक एक स्थिरांक बनाती है जो इस फ़ाइल (ऐप घटक) के रूप में एक ही निर्देशिका में एक फ़ाइल के बारे में नामक एक घटक को गतिशील रूप से आयात करने के लिए आलसी लोडिंग का उपयोग करता है।
const संपर्क = React.lazy(() => आयात('./संपर्क')); // यह लाइन कॉन्स्टेंट नामक कॉन्स्टेंट बनाती है जो इस फ़ाइल (ऐप कंपोनेंट) के समान निर्देशिका में फ़ाइल से कॉन्टैक्ट नामक घटक को गतिशील रूप से आयात करने के लिए आलसी लोडिंग का उपयोग करती है।

5. फ़ंक्शन ऐप () {वापसी ( // यह एक एरो फंक्शन है जो राउटर टैग में लिपटे JSX कोड को लौटाता है जो पहले आयात किया गया था

6.लोड हो रहा है…

}> // यह सस्पेंस टैग हमारे सभी मार्गों को लोड करने के फ़ॉलबैक प्रॉप्स के साथ लपेटता है ... यदि कोई मार्ग लोड होने में समय लेता है

7. // स्विच टैग यह सुनिश्चित करेगा कि एक बार में केवल एक ही मार्ग प्रदान किया जाए

8. // सटीक पथ "/" मिलान होने पर यह रूट होम घटक प्रस्तुत करेगा

9. // पथ "/ के बारे में" मिलान होने पर यह मार्ग घटक के बारे में प्रस्तुत करेगा

10. // पथ "/ संपर्क" मिलान होने पर यह रूट संपर्क घटक प्रस्तुत करेगा)} निर्यात डिफ़ॉल्ट ऐप; // अंत में हम सभी टैग बंद कर देते हैं और अपना ऐप निर्यात करते हैं

आलसी लोड की समस्या

आलसी लोडिंग एक ऐसी तकनीक है जिसका उपयोग कुछ घटकों को तब तक लोड करने में देरी के लिए किया जाता है जब तक कि उनकी आवश्यकता न हो। यह किसी भी समय केवल आवश्यक लोड करके किसी एप्लिकेशन के प्रदर्शन को बेहतर बनाने में मदद कर सकता है। हालाँकि, रिएक्ट राउटर का उपयोग करते समय यह एक समस्या हो सकती है, क्योंकि यह बॉक्स से आलसी लोडिंग का समर्थन नहीं करता है। इस समस्या को हल करने के लिए, आलसी लोडिंग को सक्षम करने के लिए डेवलपर्स को अपने मार्गों को मैन्युअल रूप से कॉन्फ़िगर करना होगा। इसमें गतिशील आयात और कोड विभाजन स्थापित करना शामिल हो सकता है, जो जटिल और समय लेने वाला कार्य हो सकता है। इसके अतिरिक्त, रिएक्ट लोड करने योग्य जैसे कुछ पुस्तकालयों को रिएक्ट राउटर के साथ आलसी लोडिंग को ठीक से लागू करने के लिए उपयोग करने की आवश्यकता हो सकती है।

रिएक्ट आलसी लोड क्या है

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

मैं अपने राउटर पर रिएक्ट आलसी का उपयोग कैसे करूं

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

रिएक्ट राउटर में अपने राउटर पर रिएक्ट आलसी का उपयोग करने के लिए, आपको उस घटक को लपेटने की आवश्यकता है जिसे आप गतिशील आयात कॉल में आलसी-लोड करना चाहते हैं। उदाहरण के लिए:

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

फिर, अपने मार्गों को परिभाषित करते समय, बस MyComponent घटक को रूट घटक में पास करें:

यह रिएक्ट राउटर को उस मार्ग पर नेविगेट करते समय MyComponent घटक को गतिशील रूप से लोड करने का कारण बनेगा।

संबंधित पोस्ट:

एक टिप्पणी छोड़ दो