ஜாவாஸ்கிரிப்ட் செயல்திறன் மேம்படுத்தல்: உலகளாவிய பார்வையாளர்களுக்காக கோட் ஸ்ப்ளிட்டிங் மற்றும் லேசி எவாலுவேஷன் மூலம் வேகத்தை அதிகரித்தல்

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

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

உலகளாவிய பார்வையாளர்களுக்கு ஜாவாஸ்கிரிப்ட் செயல்திறன் மேம்படுத்தல் ஏன் முக்கியமானது

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

• அதிக பவுன்ஸ் விகிதங்கள் (High Bounce Rates): பயனர்கள் மெதுவாக ஏற்றப்படும் தளங்களை விரைவாக விட்டுவிடுகிறார்கள், இது இ-காமர்ஸ் முதல் கல்வி தளங்கள் வரை அனைத்து துறைகளிலும் வணிக இலக்குகளை பாதிக்கிறது.
• மோசமான பயனர் அனுபவம் (UX): மெதுவான ஊடாடும் தன்மை, பதிலளிக்காத UIகள் மற்றும் நீண்ட காத்திருப்புகள் விரக்திக்கு வழிவகுத்து, ஈடுபாட்டையும் பிராண்ட் விசுவாசத்தையும் தடுக்கின்றன.
• குறைந்த மாற்றங்கள் (Reduced Conversions): தாமதங்கள் விற்பனை, பதிவு செய்தல் மற்றும் பிற முக்கியமான பயனர் செயல்களை நேரடியாக பாதிக்கின்றன, குறிப்பாக போட்டி நிறைந்த உலகளாவிய சந்தைகளில் செயல்திறன் சரிவுகளுக்கு இது மிகவும் உணர்திறன் கொண்டது.
• குறைந்த தேடுபொறி தரவரிசைகள்: கூகிள் உட்பட முக்கிய தேடுபொறிகள், பக்க வேகத்தை அவற்றின் தரவரிசை வழிமுறைகளில் காரணியாகக் கொள்கின்றன. மெதுவான தளங்கள் தெரிவுநிலையை இழக்கக்கூடும், இது உலகளாவிய பார்வையாளர்களை அடைவதில் ஒரு முக்கியமான பாதகமாகும்.
• அதிகரித்த தரவு நுகர்வு: பெரிய பதிவிறக்கங்கள் அதிக தரவை நுகர்கின்றன, இது வரையறுக்கப்பட்ட தரவுத் திட்டங்களைக் கொண்ட பயனர்களுக்கு ஒரு கவலையாகும், குறிப்பாக பல வளரும் பிராந்தியங்களில் இது பரவலாக உள்ளது.

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

முக்கிய பிரச்சனை: வீங்கிய ஜாவாஸ்கிரிப்ட் பண்டல்கள்

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

• நெட்வொர்க் தாமதம் (Network Latency): பெரிய பண்டல்கள் பதிவிறக்கம் செய்ய அதிக நேரம் எடுக்கும், குறிப்பாக மெதுவான நெட்வொர்க்குகளில். இந்த "முதல் பைட் நேரம்" தாமதம் ஒரு முக்கியமான பயனர் அனுபவ அளவீடு ஆகும்.
• பாகுபடுத்தல் மற்றும் தொகுக்கும் நேரம் (Parsing and Compilation Time): பதிவிறக்கம் செய்யப்பட்டவுடன், உலாவி ஜாவாஸ்கிரிப்ட் கோடை செயல்படுத்தும் முன் அதை பாகுபடுத்தி தொகுக்க வேண்டும். இந்த செயல்முறை குறிப்பிடத்தக்க CPU வளங்களை நுகர்கிறது, குறிப்பாக குறைந்த சக்திவாய்ந்த சாதனங்களில், இது பயன்பாடு ஊடாடும் முன் தாமதங்களுக்கு வழிவகுக்கிறது.
• செயல்படுத்தும் நேரம் (Execution Time): தொகுக்கப்பட்ட பிறகும், ஒரு பெரிய அளவிலான ஜாவாஸ்கிரிப்ட் கோடை செயல்படுத்துவது பிரதான த்ரெட்டை கட்டிப்போடக்கூடும், இது "உறைந்த" UI மற்றும் பதிலளிக்காத தொடர்புகளுக்கு வழிவகுக்கிறது.

எனவே, செயல்திறன் மேம்படுத்தலின் குறிக்கோள், எந்த நேரத்திலும், குறிப்பாக ஆரம்ப பக்க ஏற்றத்தின் போது பதிவிறக்கம், பாகுபடுத்தல், தொகுத்தல் மற்றும் செயல்படுத்தப்பட வேண்டிய ஜாவாஸ்கிரிப்டின் அளவைக் குறைப்பதாகும்.

கோட் ஸ்ப்ளிட்டிங்: உங்கள் ஜாவாஸ்கிரிப்ட் பண்டலின் வியூகரீதியான பிரித்தல்

கோட் ஸ்ப்ளிட்டிங் என்றால் என்ன?

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

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

கோட் ஸ்ப்ளிட்டிங் எவ்வாறு செயல்படுகிறது?

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

கோட் ஸ்ப்ளிட்டிங்கின் வகைகள்

அடிப்படை கொள்கை ஒன்றாக இருந்தாலும், கோட் ஸ்ப்ளிட்டிங் பல்வேறு வழிகளில் பயன்படுத்தப்படலாம்:

• வழித்தடம்-சார்ந்த பிரித்தல் (Route-Based Splitting): இது மிகவும் பொதுவான மற்றும் பயனுள்ள முறைகளில் ஒன்றாகும். உங்கள் பயன்பாட்டில் உள்ள ஒவ்வொரு முக்கிய வழித்தடம் அல்லது பக்கம் (எ.கா., /dashboard, /settings, /profile) அதன் சொந்த ஜாவாஸ்கிரிப்ட் சங்க் ஆக மாறும். ஒரு பயனர் ஒரு குறிப்பிட்ட வழித்தடத்திற்குச் செல்லும்போது, அந்த வழித்தடத்திற்கான கோட் மட்டுமே பதிவிறக்கம் செய்யப்படுகிறது.

              // Example: React Router with dynamic import
  const Dashboard = lazy(() => import('./Dashboard'));
  const Settings = lazy(() => import('./Settings'));
  
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route path="/dashboard" component={Dashboard} />
        <Route path="/settings" component={Settings} />
      </Switch>
    </Suspense>
  </Router>
              
  
                
                  Copy
                
              
            

• கூறு-சார்ந்த பிரித்தல் (Component-Based Splitting): வழித்தடங்களுக்கு அப்பால், ஆரம்ப ரெண்டருக்கு உடனடியாகத் தெரியாத அல்லது அவசியமற்ற தனிப்பட்ட பெரிய கூறுகள் அல்லது மாட்யூல்கள் பிரிக்கப்படலாம். இது மோடல்கள், சிக்கலான படிவங்கள் அல்லது பயனர் செயலுக்குப் பிறகு மட்டுமே காட்டப்படும் ஊடாடும் விட்ஜெட்டுகள் போன்ற அம்சங்களுக்கு குறிப்பாக பயனுள்ளதாக இருக்கும்.

              // Example: A modal component loaded dynamically
  const LargeModal = lazy(() => import('./components/LargeModal'));
  
  function App() {
    const [showModal, setShowModal] = useState(false);
    return (
      <div>
        <button onClick={() => setShowModal(true)}>Open Large Modal</button>
        {showModal && (
          <Suspense fallback={<div>Loading Modal...</div>}>
            <LargeModal onClose={() => setShowModal(false)} />
          </Suspense>
        )}
      </div>
    );
  }
              
  
                
                  Copy
                
              
            

• வெண்டார் பிரித்தல் (Vendor Splitting): இந்த நுட்பம் மூன்றாம் தரப்பு லைப்ரரிகளை (எ.கா., ரியாக்ட், லோடேஷ், மொமென்ட்.ஜெஸ்) உங்கள் பயன்பாட்டின் சொந்த கோடிலிருந்து பிரிக்கிறது. வெண்டார் லைப்ரரிகள் உங்கள் பயன்பாட்டு கோடை விட குறைவாகவே மாறுகின்றன என்பதால், அவற்றைப் பிரிப்பது உலாவிகளுக்கு அவற்றை தனித்தனியாகவும் திறமையாகவும் கேச் செய்ய அனுமதிக்கிறது. இதன் பொருள், உங்கள் பயன்பாட்டின் குறிப்பிட்ட கோட் மாறும்போது மட்டுமே பயனர்கள் அதை மீண்டும் பதிவிறக்கம் செய்ய வேண்டும், இது கேச் பயன்பாட்டையும் அடுத்தடுத்த பக்க ஏற்றங்களையும் மேம்படுத்துகிறது. பெரும்பாலான பண்டலர்கள் தானாகவே வெண்டார் பிரித்தலைக் கையாளலாம் அல்லது அதற்கான உள்ளமைவை அனுமதிக்கலாம்.

கோட் ஸ்ப்ளிட்டிங்கின் நன்மைகள்

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

• வேகமான ஆரம்ப பக்க ஏற்றம்: ஆரம்ப ஜாவாஸ்கிரிப்ட் பண்டலின் அளவைக் குறைப்பதன் மூலம், பக்கங்கள் வேகமாக ஏற்றப்பட்டு ஊடாடும் தன்மையைப் பெறுகின்றன, இது கோர் வெப் வைட்டல்ஸை (Largest Contentful Paint, First Input Delay) மேம்படுத்துகிறது.
• மேம்படுத்தப்பட்ட வள பயன்பாடு: உலாவிகள் தேவையானதை மட்டுமே பதிவிறக்கம் செய்கின்றன, இது பயனர்களுக்கான அலைவரிசையைச் சேமிக்கிறது, இது செலவுமிக்க அல்லது வரையறுக்கப்பட்ட தரவுத் திட்டங்களைக் கொண்ட பிராந்தியங்களில் குறிப்பாக நன்மை பயக்கும்.
• சிறந்த கேச்சிங்: சிறிய, சுதந்திரமான சங்க்கள் மேலும் நுணுக்கமாக கேச் செய்யக்கூடியவை. உங்கள் பயன்பாட்டின் ஒரு சிறிய பகுதி மட்டுமே மாறினால், அந்த குறிப்பிட்ட சங்கை மட்டுமே மீண்டும் பதிவிறக்கம் செய்ய வேண்டும், முழு பயன்பாட்டையும் அல்ல.
• மேம்படுத்தப்பட்ட பயனர் அனுபவம்: ஒரு துரிதமான பயன்பாடு அதிக பயனர் திருப்தி, அதிகரித்த ஈடுபாடு மற்றும் மாறுபட்ட உலகளாவிய பயனர் தளங்களில் சிறந்த மாற்று விகிதங்களுக்கு வழிவகுக்கிறது.

கோட் ஸ்ப்ளிட்டிங்கிற்கான கருவிகள் மற்றும் செயலாக்கங்கள்

நவீன பில்ட் கருவிகள் மற்றும் கட்டமைப்புகள் கோட் ஸ்ப்ளிட்டிங்கிற்கு உள்ளமைக்கப்பட்ட ஆதரவைக் கொண்டுள்ளன:

• Webpack: டைனமிக் இறக்குமதிகள் (import()) உட்பட கோட் ஸ்ப்ளிட்டிங்கிற்கு விரிவான உள்ளமைவை வழங்குகிறது, இது தனித்தனி சங்க்களின் உருவாக்கத்தைத் தூண்டுகிறது.
• Rollup: லைப்ரரி மேம்பாட்டிற்கு சிறந்தது, ரோலப்பும் கோட் ஸ்ப்ளிட்டிங்கை ஆதரிக்கிறது, குறிப்பாக டைனமிக் இறக்குமதிகள் மூலம்.
• Vite: நேட்டிவ் ES மாட்யூல்களைப் பயன்படுத்தும் அடுத்த தலைமுறை பில்ட் கருவி, இது கோட் ஸ்ப்ளிட்டிங்கை மிகவும் திறமையானதாக்குகிறது மற்றும் பெரும்பாலும் குறைந்த உள்ளமைவு தேவைப்படுகிறது.
• React: React.lazy() செயல்பாடு <Suspense> உடன் இணைந்து கூறு-நிலை கோட் ஸ்ப்ளிட்டிங்கை செயல்படுத்த ஒரு நேர்த்தியான வழியை வழங்குகிறது.
• Vue.js: வ்யூவில் உள்ள அசிங்க் கூறுகள் (எ.கா., const MyComponent = () => import('./MyComponent.vue')) இதே போன்ற முடிவுகளை அடைகின்றன.
• Angular: பயன்பாட்டுக் கோடை தனித்தனி பண்டல்களாகப் பிரிக்க லேசி-லோடட் வழித்தடங்கள் மற்றும் NgModules-ஐப் பயன்படுத்துகிறது.

லேசி எவாலுவேஷன் (லேசி லோடிங்): தேவைக்கேற்ப தந்திரோபாயமாக ஏற்றுதல்

லேசி எவாலுவேஷன் (லேசி லோடிங்) என்றால் என்ன?

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

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

லேசி லோடிங் எவ்வாறு செயல்படுகிறது?

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

லேசி லோடிங்கிற்கான பொதுவான தூண்டுதல்கள்:

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

லேசி லோடிங்கை எப்போது பயன்படுத்துவது

லேசி லோடிங் குறிப்பாக இவற்றுக்கு பயனுள்ளதாக இருக்கும்:

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

லேசி லோடிங்கின் நன்மைகள்

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

• குறைக்கப்பட்ட ஆரம்ப ஏற்ற நேரம்: அத்தியாவசிய கோட் மட்டுமே முன்கூட்டியே ஏற்றப்படுவதால், பயன்பாடு ஆரம்பத்தில் வேகமாகவும் பதிலளிக்கக்கூடியதாகவும் தோன்றும்.
• குறைந்த நினைவக நுகர்வு: குறைந்த கோட் ஏற்றப்படுவதால் உலாவி மூலம் குறைந்த நினைவகம் நுகரப்படுகிறது, இது குறைந்த-நிலை சாதனங்களில் உள்ள பயனர்களுக்கு ஒரு குறிப்பிடத்தக்க நன்மை.
• சேமிக்கப்பட்ட அலைவரிசை: தேவையற்ற வளங்கள் பதிவிறக்கம் செய்யப்படுவதில்லை, இது பயனர்களுக்கு தரவைச் சேமிக்கிறது மற்றும் சேவையகச் சுமையைக் குறைக்கிறது.
• மேம்படுத்தப்பட்ட ஊடாடும் நேரம் (TTI): முக்கியமற்ற ஜாவாஸ்கிரிப்டை ஒத்திவைப்பதன் மூலம், பிரதான த்ரெட் விரைவில் விடுவிக்கப்படுகிறது, இது பயனர்கள் பயன்பாட்டுடன் வேகமாக ஊடாட அனுமதிக்கிறது.
• சிறந்த பயனர் அனுபவம்: ஒரு மென்மையான, விரைவான ஆரம்ப அனுபவம் பயனர்களை ஈடுபாட்டுடன் வைத்திருக்கிறது, இது பயன்பாட்டின் தரம் குறித்த அவர்களின் உணர்வை மேம்படுத்துகிறது.

லேசி லோடிங்கிற்கான கருவிகள் மற்றும் செயலாக்கங்கள்

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

• டைனமிக் import(): மாட்யூல்களை ஒத்திசைவின்றி இறக்குமதி செய்வதற்கான நிலையான ECMAScript தொடரியல். இது பெரும்பாலான லேசி லோடிங் செயலாக்கங்களுக்கான அடித்தளமாகும்.

              // Dynamic import example
  const loadModule = async () => {
    const module = await import('./myHeavyModule.js');
    module.init();
  };
              
  
                
                  Copy
                
              
            

• React.lazy மற்றும் Suspense: முன்னர் நிரூபிக்கப்பட்டபடி, React.lazy() ஒரு மாறும் வகையில் ஏற்றப்பட்ட கூறுகளை உருவாக்குகிறது, மேலும் <Suspense> கூறின் கோட் பெறப்படும்போது ஒரு பின்வாங்கல் UI-ஐ வழங்குகிறது.
• Vue Async Components: வ்யூ அசிங்க் கூறுகளை உருவாக்குவதற்கான இதே போன்ற பொறிமுறையை வழங்குகிறது, இது டெவலப்பர்களுக்கு ஒரு கூறுக்கான ப்ராமிஸைத் தரும் ஒரு தொழிற்சாலை செயல்பாட்டை வரையறுக்க அனுமதிக்கிறது.
• Intersection Observer API: பார்வைக்கு ஸ்க்ரோல் செய்யும்போது தோன்றும் உள்ளடக்கத்தை (எ.கா., படங்கள், மடிப்புக்குக் கீழே உள்ள கூறுகள்) லேசி லோடு செய்ய, Intersection Observer API ஒரு நேட்டிவ் உலாவி API ஆகும், இது ஒரு உறுப்பு எப்போது வியூபோர்ட்டில் நுழைகிறது அல்லது வெளியேறுகிறது என்பதை திறமையாகக் கண்டறிகிறது.

கோட் ஸ்ப்ளிட்டிங் மற்றும் லேசி எவாலுவேஷன்: ஒரு ஒன்றிய உறவு

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

• கோட் ஸ்ப்ளிட்டிங் என்பது "என்ன" – உங்கள் ஒற்றைப் பயன்பாட்டை சிறிய, சுதந்திரமான ஜாவாஸ்கிரிப்ட் சங்க்களாக புத்திசாலித்தனமாகப் பிரிக்கும் பில்ட்-டைம் செயல்முறை. இது உங்கள் வெளியீட்டுக் கோப்புகளை கட்டமைப்பதைப் பற்றியது.
• லேசி எவாலுவேஷன் (லேசி லோடிங்) என்பது "எப்போது" மற்றும் "எப்படி" – பயனர் தொடர்பு அல்லது பயன்பாட்டு நிலையின் அடிப்படையில் உருவாக்கப்பட்ட அந்த சங்க்களை *எப்போது* ஏற்றுவது மற்றும் அந்த ஏற்றத்தை *எப்படி* தொடங்குவது (எ.கா., டைனமிக் import() மூலம்) என்பதை தீர்மானிக்கும் ரன்டைம் பொறிமுறையாகும்.

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

நடைமுறை ஒருங்கிணைப்பு: ஒரு ஒருங்கிணைந்த அணுகுமுறை

உலக சந்தைக்காக வடிவமைக்கப்பட்ட ஒரு பெரிய இ-காமர்ஸ் பயன்பாட்டைக் கவனியுங்கள். அதில் தயாரிப்பு பரிந்துரை இயந்திரம், விரிவான வாடிக்கையாளர் ஆதரவு அரட்டை விட்ஜெட் மற்றும் விற்பனையாளர்களுக்கான நிர்வாக டாஷ்போர்டு போன்ற சிக்கலான அம்சங்கள் இருக்கலாம். இந்த அம்சங்கள் அனைத்தும் கனமான ஜாவாஸ்கிரிப்ட் லைப்ரரிகளைப் பயன்படுத்தலாம்.

• கோட் ஸ்ப்ளிட்டிங் உத்தி:
  • பிரதான பயன்பாட்டு பண்டலை (தலைப்பு, வழிசெலுத்தல், தயாரிப்பு பட்டியல்கள்) குறைந்த முக்கியத்துவம் வாய்ந்த அம்சங்களிலிருந்து பிரிக்கவும்.
  • தயாரிப்பு பரிந்துரை இயந்திரம், அரட்டை விட்ஜெட் மற்றும் நிர்வாக டாஷ்போர்டு ஆகியவற்றிற்கு தனித்தனி சங்க்களை உருவாக்கவும்.
  • வெண்டார் பிரித்தல், ரியாக்ட் அல்லது வ்யூ போன்ற லைப்ரரிகள் சுதந்திரமாக கேச் செய்யப்படுவதை உறுதி செய்கிறது.
• லேசி லோடிங் செயலாக்கம்:
  • தயாரிப்பு பரிந்துரை இயந்திரம் (வளம்-செறிவு மிக்கதாக இருந்தால்) ஒரு பயனர் ஒரு தயாரிப்பு பக்கத்தில் அந்தப் பகுதிக்குக் கீழே ஸ்க்ரோல் செய்யும்போது மட்டுமே, ஒரு Intersection Observer-ஐப் பயன்படுத்தி லேசி-லோடு செய்யப்படலாம்.
  • வாடிக்கையாளர் ஆதரவு அரட்டை விட்ஜெட், பயனர் "ஆதரவு" ஐகானைக் கிளிக் செய்யும்போது மட்டுமே லேசி-லோடு செய்யப்படும்.
  • நிர்வாக டாஷ்போர்டு முற்றிலும் லேசி-லோடு செய்யப்படும், ஒருவேளை வழித்தடம்-சார்ந்த பிரித்தல் மூலம், ஒரு நிர்வாக வழித்தடத்திற்கு வெற்றிகரமாக உள்நுழைந்த பிறகு மட்டுமே அணுக முடியும்.

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

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

கோட் ஸ்ப்ளிட்டிங் மற்றும் லேசி எவாலுவேஷனின் நன்மைகளை அதிகரிக்க, இந்த சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

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

              <link rel="prefetch" href="next-route-chunk.js" as="script">
              
  
                
                  Copy
                
              
            

• சஸ்பென்ஸுடன் பிழை கையாளுதல்: லேசி கூறுகளைப் பயன்படுத்தும்போது (குறிப்பாக ரியாக்டில்), சாத்தியமான ஏற்றுதல் பிழைகளை நளினமாகக் கையாளவும். நெட்வொர்க் சிக்கல்கள் அல்லது தோல்வியுற்ற சங்க் பதிவிறக்கங்கள் உடைந்த UI-க்கு வழிவகுக்கும். ரியாக்டில் உள்ள <Suspense> ஒரு errorBoundary பண்பை வழங்குகிறது, அல்லது நீங்கள் உங்கள் சொந்த பிழை எல்லைகளைச் செயல்படுத்தலாம்.
• ஏற்றுதல் குறிகாட்டிகள்: உள்ளடக்கம் லேசி-லோடு செய்யப்படும்போது பயனர்களுக்கு எப்போதும் காட்சிப் பின்னூட்டத்தை வழங்கவும். ஒரு எளிய ஸ்பின்னர் அல்லது ஸ்கெலிட்டன் UI, பயன்பாடு உறைந்துவிட்டது என்று பயனர்கள் நினைப்பதைத் தடுக்கிறது. இது நீண்ட ஏற்றுதல் நேரங்களை அனுபவிக்கக்கூடிய மெதுவான நெட்வொர்க்குகளில் உள்ள பயனர்களுக்கு மிகவும் முக்கியமானது.
• பண்டல் பகுப்பாய்வு கருவிகள்: உங்கள் பண்டலின் கலவையை காட்சிப்படுத்த Webpack Bundle Analyzer அல்லது Source Map Explorer போன்ற கருவிகளைப் பயன்படுத்தவும். இந்தக் கருவிகள் பிரித்தலுக்கு இலக்காகக் கூடிய பெரிய சார்புகள் அல்லது தேவையற்ற கோடைக் கண்டறிய உதவுகின்றன.
• சாதனங்கள் மற்றும் நெட்வொர்க்குகளில் சோதனை செய்யவும்: செயல்திறன் பரவலாக மாறுபடலாம். உங்கள் உலகளாவிய பார்வையாளர்களுக்கு ஒரு நிலையான அனுபவத்தை உறுதிப்படுத்த, உங்கள் மேம்படுத்தப்பட்ட பயன்பாட்டை பல்வேறு சாதன வகைகளிலும் (குறைந்த-நிலை முதல் உயர்-நிலை மொபைல், டெஸ்க்டாப்) மற்றும் உருவகப்படுத்தப்பட்ட நெட்வொர்க் நிலைமைகளிலும் (வேகமான 4G, மெதுவான 3G) சோதிக்கவும். உலாவி டெவலப்பர் கருவிகள் இந்த நோக்கத்திற்காக நெட்வொர்க் த்ராட்லிங் அம்சங்களை வழங்குகின்றன.
• சர்வர்-சைட் ரெண்டரிங் (SSR) அல்லது ஸ்டேடிக் சைட் ஜெனரேஷன் (SSG) ஆகியவற்றைக் கருத்தில் கொள்ளுங்கள்: ஆரம்ப பக்க ஏற்றம் மிக முக்கியமான பயன்பாடுகளுக்கு, குறிப்பாக SEO-க்கு, இந்த கிளையன்ட்-சைட் மேம்படுத்தல்களை SSR அல்லது SSG உடன் இணைப்பது சாத்தியமான வேகமான "முதல் பெயிண்ட் நேரம்" மற்றும் "ஊடாடும் நேரம்" ஆகியவற்றை வழங்க முடியும்.

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

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

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

முடிவுரை: உலகளாவிய வெற்றிக்காக உங்கள் ஜாவாஸ்கிரிப்ட் பயன்பாடுகளை வலுவூட்டுதல்

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

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

மேலும் படிக்க மற்றும் ஆதாரங்கள்:

• கோட் ஸ்ப்ளிட்டிங் பற்றிய வெப்பேக் ஆவணங்கள்
• லேசி லோடிங் கூறுகள் பற்றிய ரியாக்ட் ஆவணங்கள்
• Vue.js அசிங்க் கூறுகள் வழிகாட்டி
• MDN வலை ஆவணங்கள்: இன்டர்செக்சன் அப்சர்வர் API
• கூகிள் டெவலப்பர்கள்: ஜாவாஸ்கிரிப்ட் பண்டல்களை மேம்படுத்துதல்