தீர்க்கப்பட்டது: ரியாக்ட் ரூட்டர் சோம்பேறி சுமை

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;

}> //இந்த சஸ்பென்ஸ் டேக், லோடிங்கின் ஃபால்பேக் ப்ராப்ஸ் மூலம் எங்களின் எல்லா வழிகளையும் மூடுகிறது... எந்த வழியும் ஏற்றுவதற்கு நேரம் எடுத்தால்

7. //சுவிட்ச் டேக் ஒரே நேரத்தில் ஒரே ஒரு வழி வழங்கப்படுவதை உறுதி செய்யும்

8. //சரியான பாதை "/" பொருந்தினால், இந்த வழி முகப்பு கூறுகளை வழங்கும்

9. //இந்த வழி "/about" பாதை பொருத்தப்படும் போது உபகரணத்தைப் பற்றி வழங்கும்

10. //இந்த வழி "/தொடர்பு" பாதை பொருந்தும் போது தொடர்பு கூறுகளை வழங்கும் ) } இயல்புநிலை பயன்பாட்டை ஏற்றுமதி செய்யவும்; //இறுதியாக எல்லா குறிச்சொற்களையும் மூடிவிட்டு எங்கள் பயன்பாட்டை ஏற்றுமதி செய்கிறோம்

சோம்பேறி சுமை பிரச்சனை

சோம்பேறி ஏற்றுதல் என்பது சில கூறுகள் தேவைப்படும் வரை அவற்றை ஏற்றுவதை தாமதப்படுத்த பயன்படும் ஒரு நுட்பமாகும். இது எந்த நேரத்திலும் தேவையானதை மட்டும் ஏற்றுவதன் மூலம் பயன்பாட்டின் செயல்திறனை மேம்படுத்த உதவும். இருப்பினும், ரியாக்ட் ரூட்டரைப் பயன்படுத்தும் போது இது ஒரு சிக்கலாக இருக்கலாம், ஏனெனில் இது பெட்டியிலிருந்து சோம்பேறியாக ஏற்றுவதை ஆதரிக்காது. இந்தச் சிக்கலைச் சமாளிக்க, டெவலப்பர்கள் சோம்பேறி ஏற்றுதலைச் செயல்படுத்த தங்கள் வழிகளை கைமுறையாக உள்ளமைக்க வேண்டும். இது டைனமிக் இறக்குமதிகள் மற்றும் குறியீட்டைப் பிரிப்பதை அமைப்பதை உள்ளடக்கியது, இது சிக்கலான மற்றும் நேரத்தைச் செலவழிக்கும் பணிகளாக இருக்கலாம். கூடுதலாக, ரியாக்ட் ரூட்டருடன் சோம்பேறி ஏற்றுதலைச் சரியாகச் செயல்படுத்த, ரியாக்ட் லோடபிள் போன்ற சில நூலகங்களைப் பயன்படுத்த வேண்டியிருக்கும்.

ரியாக்ட் சோம்பேறி சுமை என்றால் என்ன

ரியாக்ட் சோம்பேறி சுமை என்பது ரியாக்ட் ரூட்டரின் அம்சமாகும், இது தேவைக்கேற்ப கூறுகளை ஏற்ற அனுமதிக்கிறது. அதாவது, அனைத்து கூறுகளையும் ஒரே நேரத்தில் ஏற்றுவதற்குப் பதிலாக, தேவைப்படும் போது தேவையான கூறுகள் மட்டுமே ஏற்றப்படும். இது ஆரம்ப பக்க சுமை நேரத்தை குறைக்கவும் செயல்திறனை மேம்படுத்தவும் உதவுகிறது. ஒவ்வொரு கூறுகளையும் தனித்தனியாக ஏற்ற முடியும் என்பதால், சிறந்த குறியீடு அமைப்பு மற்றும் கவலைகளைப் பிரிப்பதற்கும் இது அனுமதிக்கிறது.

எனது ரூட்டரில் ரியாக்ட் லேஸியை எவ்வாறு பயன்படுத்துவது

ரியாக்ட் சோம்பேறி என்பது ரியாக்டின் ஒரு அம்சமாகும், இது கூறுகளை மாறும் வகையில் இறக்குமதி செய்ய உங்களை அனுமதிக்கிறது. இதன் பொருள், அனைத்து கூறுகளையும் முன்கூட்டியே ஏற்றுவதற்குப் பதிலாக, தேவைக்கேற்ப அவற்றை ஏற்றலாம். பெரிய பயன்பாடுகளில் செயல்திறனை மேம்படுத்த இது பயனுள்ளதாக இருக்கும்.

ரியாக்ட் ரூட்டரில் உங்கள் ரூட்டரில் ரியாக்ட் லேஸியைப் பயன்படுத்த, நீங்கள் சோம்பேறியாக ஏற்ற விரும்பும் கூறுகளை டைனமிக் இறக்குமதி அழைப்பில் மடிக்க வேண்டும். உதாரணத்திற்கு:

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

பின்னர், உங்கள் வழிகளை வரையறுக்கும்போது, ​​MyComponent கூறுகளை வழி கூறுக்குள் அனுப்பவும்:

இது ரியாக்ட் ரூட்டரை அந்த வழிக்கு செல்லும்போது MyComponent கூறுகளை மாறும் வகையில் ஏற்றும்.