M
MLOG
React Lazy-ல் தேர்ச்சி பெறுதல்: கூறு சோம்பல் ஏற்றுதலுக்கான ஒரு உலகளாவிய வழிகாட்டி | MLOG | MLOG

இந்த எடுத்துக்காட்டில், ஒரு பயனர் /about வழித்தடத்திற்குச் செல்லும்போது, AboutPage-க்கான (மற்றும் அதன் சார்புகள்) ஜாவாஸ்கிரிப்ட் மட்டுமே பெறப்பட்டு ஏற்றப்படும். இது ஒரு குறிப்பிடத்தக்க செயல்திறன் வெற்றியாகும், குறிப்பாக பல வேறுபட்ட வழித்தடங்களைக் கொண்ட பெரிய பயன்பாடுகளுக்கு. உள்ளூர்மயமாக்கப்பட்ட உள்ளடக்கம் அல்லது அம்சங்களைக் கொண்ட ஒரு உலகளாவிய பயன்பாட்டிற்கு, இது தேவைப்படும்போது நாட்டுக்குரிய வழித்தடக் கூறுகளை மட்டும் ஏற்றுவதற்கும் அனுமதிக்கிறது, இது விநியோகத்தை மேலும் மேம்படுத்துகிறது.

2. கூறு அடிப்படையிலான குறியீடு பிரித்தல்

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

ஒரு டாஷ்போர்டு பயன்பாட்டைக் கருத்தில் கொள்வோம், அங்கு ஒரு பயனர் ஒரு குறிப்பிட்ட பகுதியை விரிவுபடுத்தும்போது மட்டுமே ஒரு சிக்கலான விளக்கப்படக் கூறு தெரியும்:

            import React, { useState, Suspense, lazy } from 'react';

const ComplexChart = lazy(() => import('./components/ComplexChart'));

function Dashboard() {
  const [showChart, setShowChart] = useState(false);

  return (
    

      
Dashboard Overview

      

      {showChart && (
        Loading chart...
}>
          
        
      )}
); } export default Dashboard;

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

3. நூலகங்கள் மற்றும் பெரிய சார்புகள்

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

            import React, { Suspense, lazy } from 'react';

// Assume 'heavy-ui-library' is large and only needed for a specific feature
const FeatureWithHeavyLibrary = lazy(() => import('./features/HeavyFeature'));

function App() {
  return (
    

      
Welcome!

      {/* Other parts of the app that don't need the heavy library */}
      
      {/* Lazy load the component that uses the heavy library */}
      Loading advanced feature...
}>
); } export default App;

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

குறியீடு பிரித்தலுக்காக உங்கள் பண்ட்லரை உள்ளமைத்தல்

React.lazy மற்றும் Suspense ஆகியவை சோம்பல் ஏற்றுதலின் React-சார்ந்த அம்சங்களைக் கையாளும் அதே வேளையில், உங்கள் மாட்யூல் பண்ட்லர் (Webpack போன்றவை) குறியீடு பிரித்தலைச் செய்ய உள்ளமைக்கப்பட வேண்டும்.

Webpack 4 மற்றும் அதற்குப் பிந்தைய பதிப்புகள் குறியீடு பிரித்தலுக்கு உள்ளமைக்கப்பட்ட ஆதரவைக் கொண்டுள்ளன. நீங்கள் டைனமிக் import()-ஐப் பயன்படுத்தும்போது, Webpack தானாகவே அந்த மாட்யூல்களுக்கு தனித்தனி பண்டல்களை (துண்டுகள்) உருவாக்குகிறது. அடிப்படை டைனமிக் இறக்குமதிகளுக்கு பொதுவாக உங்களுக்கு விரிவான உள்ளமைவு தேவையில்லை.

இருப்பினும், மேலும் மேம்பட்ட கட்டுப்பாட்டிற்கு, நீங்கள் Webpack உள்ளமைவு விருப்பங்களை சந்திக்கலாம்:

எடுத்துக்காட்டு Webpack உள்ளமைவு துணுக்கு (webpack.config.js-க்கு):

            // webpack.config.js
module.exports = {
  // ... other configurations
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
  // ...
};

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

உலகளாவிய பார்வையாளர்களுக்கான மேம்பட்ட பரிசீலனைகள் மற்றும் சிறந்த நடைமுறைகள்

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

1. மாற்று UI-களின் நுணுக்கம்

Suspense-ல் உள்ள fallback prop அர்த்தமுள்ளதாக இருக்க வேண்டும். ஒரு எளிய Loading... உரை சில சூழ்நிலைகளுக்கு ஏற்கத்தக்கதாக இருக்கலாம், ஆனால் ஒரு மேலும் விளக்கமான அல்லது பார்வைக்கு ஈர்க்கும் மாற்று UI பெரும்பாலும் சிறந்தது. இவற்றைப் பயன்படுத்தக் கருதுங்கள்:

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

2. நெட்வொர்க் நிலைமைகள் மற்றும் பயனர் இருப்பிடங்கள்

React.lazy மற்றும் Suspense ஆகியவை ஜாவாஸ்கிரிப்ட் துண்டுகளைப் பெறுவதன் மூலம் செயல்படுகின்றன. செயல்திறன் தாக்கம் பயனரின் நெட்வொர்க் வேகம் மற்றும் குறியீட்டை வழங்கும் சேவையகத்தின் அருகாமையால் பெரிதும் பாதிக்கப்படுகிறது. இவற்றைக் கருத்தில் கொள்ளுங்கள்:

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

3. சோம்பல் கூறுகளுக்கான பிழை கையாளுதல்

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

சாத்தியமான ஏற்றுதல் தோல்விகளைப் பிடிக்க உங்கள் Suspense எல்லையை ஒரு ErrorBoundary உடன் நீங்கள் போர்த்தலாம்:

            import React, { Suspense, lazy } from 'react';
import ErrorBoundary from './ErrorBoundary'; // Assuming you have an ErrorBoundary component

const RiskyLazyComponent = lazy(() => import('./RiskyComponent'));

function App() {
  return (
    

      
App Content

      Something went wrong loading this component.
}>
        Loading...
}>
); } export default App;

உங்கள் ErrorBoundary கூறு பொதுவாக பிழைகளைப் பதிவுசெய்யவும், ஒரு பயனர் நட்பு செய்தியைக் காட்டவும் ஒரு componentDidCatch முறையைக் கொண்டிருக்கும். இது அனைத்து பயனர்களுக்கும், அவர்களின் நெட்வொர்க் நிலைத்தன்மை அல்லது இருப்பிடத்தைப் பொருட்படுத்தாமல், ஒரு வலுவான அனுபவத்தை பராமரிக்க முக்கியமானது.

4. சோம்பலாக ஏற்றப்பட்ட கூறுகளைச் சோதித்தல்

சோம்பலாக ஏற்றப்பட்ட கூறுகளைச் சோதிப்பதற்கு சற்றே வித்தியாசமான அணுகுமுறை தேவைப்படுகிறது. React.lazy மற்றும் Suspense-ல் போர்த்தப்பட்ட கூறுகளைச் சோதிக்கும்போது, நீங்கள் பெரும்பாலும் செய்ய வேண்டியவை:

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

5. கருவிகள் மற்றும் பகுப்பாய்வுகள்

போன்ற கருவிகளைப் பயன்படுத்தி உங்கள் பயன்பாட்டின் செயல்திறனைக் கண்காணிக்கவும்:

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

பொதுவான இடர்களும் அவற்றைத் தவிர்ப்பதற்கான வழிகளும்

சக்திவாய்ந்ததாக இருந்தாலும், சோம்பல் ஏற்றுதல் கவனமாக செயல்படுத்தப்படாவிட்டால் சில நேரங்களில் எதிர்பாராத சிக்கல்களுக்கு வழிவகுக்கும்:

முடிவுரை: வேகமான, அணுகக்கூடிய உலகளாவிய பயன்பாட்டை உருவாக்குதல்

React.lazy மற்றும் Suspense ஆகியவை உயர் செயல்திறன் கொண்ட வலைப் பயன்பாடுகளை உருவாக்க விரும்பும் எந்தவொரு React டெவலப்பருக்கும் ഒഴிக்க முடியாத கருவிகளாகும். கூறு சோம்பல் ஏற்றுதலை ஏற்றுக்கொள்வதன் மூலம், உங்கள் பயன்பாட்டின் ஆரம்ப ஏற்றுதல் நேரங்களை வியத்தகு रूपத்தில் மேம்படுத்தலாம், வள நுகர்வைக் குறைக்கலாம், மற்றும் ஒரு மாறுபட்ட உலகளாவிய பார்வையாளர்களுக்கான ஒட்டுமொத்த பயனர் அனுபவத்தை மேம்படுத்தலாம்.

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

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