यहां रिएक्ट प्रोजेक्ट में आलसी लोडिंग और कोड विभाजन को लागू करने के लिए चरण-दर-चरण मार्गदर्शिका दी गई है। हम दो मार्गों के साथ एक सरल एप्लिकेशन बनाएंगे, घटकों को लापरवाही से लोड करेंगे।

चरण 1: एक नया रिएक्ट ऐप बनाएं

यदि आपने पहले से नहीं बनाया है, तो क्रिएट रिएक्ट ऐप का उपयोग करके एक नया रिएक्ट ऐप बनाएं:

npx create-react-app lazy-loading-example
cd lazy-loading-example

चरण 2: रिएक्ट राउटर स्थापित करें

रूटिंग के लिए रिएक्ट-राउटर-डोम स्थापित करें:

npm install react-router-dom

चरण 3: आलसी लोडिंग और कोड विभाजन सेट करें

घटक बनाएँ

1. src निर्देशिका के अंदर घटकों नामक एक फ़ोल्डर बनाएं।
2. घटकों के अंदर, दो फ़ाइलें बनाएं: Home.js और About.js।

Home.js

import React from 'react';

const Home = () => {
  return 
Home Page
;
};

export default Home;

अबाउट.जेएस

import React from 'react';

const About = () => {
  return 
About Page
;
};

export default About;

App.js अपडेट करें

अब, आलसी लोडिंग और रूटिंग को लागू करने के लिए अपनी App.js फ़ाइल को संशोधित करें:

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

// Lazy load components
const Home = React.lazy(() => import('./components/Home'));
const About = React.lazy(() => import('./components/About'));

function App() {
  return (
    
      

      Loading...}>
        
          
          
        
      
    
  );
}

export default App;

चरण 4: अपना एप्लिकेशन चलाएँ

अब, अपने एप्लिकेशन को क्रियाशील देखने के लिए उसे चलाएं:

npm start

चरण 5: आलसी लोडिंग का परीक्षण करें

1. अपना ब्राउज़र खोलें और http://localhost:3000 पर नेविगेट करें।
2. होम घटक लोड देखने के लिए "होम" लिंक पर क्लिक करें।
3. आलसी से घटक लोड के बारे में देखने के लिए "अबाउट" लिंक पर क्लिक करें।

प्रमुख बिंदु

• React.lazy का उपयोग घटकों को गतिशील रूप से आयात करने के लिए किया जाता है, जो केवल तभी लोड होते हैं जब उन्हें प्रस्तुत किया जाता है।
• सस्पेंस का उपयोग लोडिंग स्थिति को संभालने के लिए किया जाता है, जब आलसी-लोड किए गए घटक को लाया जा रहा होता है तो फ़ॉलबैक प्रदर्शित होता है।
• यह दृष्टिकोण कोड को छोटे भागों में विभाजित करके प्रारंभिक लोड समय को काफी कम कर देता है।

अतिरिक्त संवर्द्धन

आप अपने सेटअप को और बेहतर बना सकते हैं:

• लोडिंग त्रुटियों को पकड़ने के लिए आपके आलसी-लोड किए गए घटकों के आसपास त्रुटि सीमाएं लागू करना।
• बड़े अनुप्रयोगों के लिए रिएक्ट राउटर के साथ उन्नत रूटिंग रणनीतियों का उपयोग करना।

यदि आपको अधिक विशिष्ट सुविधाओं या अतिरिक्त सहायता की आवश्यकता है, तो मुझे बताएं!