M
MLOG
जावास्क्रिप्ट डायनामिक इम्पोर्ट्स: कोड स्प्लिटिंग और लेज़ी लोडिंग में महारत | MLOG | MLOG

Modal कंपोनेंट केवल तभी लोड होता है जब उपयोगकर्ता "Open Modal" बटन पर क्लिक करता है।

3. फ़ीचर-आधारित कोड स्प्लिटिंग

यह दृष्टिकोण आपके एप्लिकेशन के भीतर विशिष्ट सुविधाओं या कार्यात्मकताओं के आधार पर कोड को विभाजित करने पर केंद्रित है। यह उन बड़े एप्लिकेशनों के लिए विशेष रूप से उपयोगी है जिनमें जटिल सुविधाएँ हैं जिनकी हमेशा सभी उपयोगकर्ताओं को आवश्यकता नहीं होती है। उदाहरण के लिए, एक ई-कॉमर्स साइट उत्पाद समीक्षाओं या इच्छा सूचियों से संबंधित कोड को केवल तभी लेज़ी लोड कर सकती है जब उपयोगकर्ता उन सुविधाओं के साथ इंटरैक्ट करता है।

उदाहरण (एक रिपोर्टिंग फ़ीचर को लेज़ी लोड करना):

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

const ReportingDashboard = lazy(() => import('./features/ReportingDashboard'));

function AdminPanel() {
  const [showReporting, setShowReporting] = useState(false);

  const handleShowReporting = () => {
    setShowReporting(true);
  };

  return (
    

      
      {showReporting && (
        Loading Reporting...
}>
          
        
      )}
); } export default AdminPanel;

ReportingDashboard कंपोनेंट, जिसमें संभवतः जटिल डेटा विज़ुअलाइज़ेशन और एनालिटिक्स लॉजिक होता है, केवल तभी लोड होता है जब एडमिनिस्ट्रेटर "Show Reporting Dashboard" बटन पर क्लिक करता है।

4. कंडीशनल कोड स्प्लिटिंग

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

उदाहरण (पुराने ब्राउज़रों के लिए पॉलीफ़िल लोड करना):

            async function loadPolyfills() {
  if (!('fetch' in window)) {
    await import('whatwg-fetch');
    console.log('Fetch polyfill loaded.');
  }

  if (!('Promise' in window)) {
    await import('promise-polyfill/src/polyfill');
    console.log('Promise polyfill loaded.');
  }
}

loadPolyfills();

यह कोड जाँचता है कि ब्राउज़र fetch API और Promise का समर्थन करता है या नहीं। यदि नहीं, तो यह गतिशील रूप से संबंधित पॉलीफ़िल आयात करता है।

लेज़ी लोडिंग रणनीतियाँ

लेज़ी लोडिंग एक ऐसी तकनीक है जो संसाधनों की लोडिंग को तब तक टाल देती है जब तक उनकी वास्तव में आवश्यकता न हो। यह प्रारंभिक पेज लोड समय में काफी सुधार कर सकता है और बैंडविड्थ की खपत को कम कर सकता है। डायनामिक इम्पोर्ट्स जावास्क्रिप्ट एप्लिकेशनों में लेज़ी लोडिंग को लागू करने के लिए एक शक्तिशाली उपकरण हैं।

1. लेज़ी लोडिंग इमेजेज

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

उदाहरण (इंटरसेक्शन ऑब्जर्वर एपीआई का उपयोग करके):

            const images = document.querySelectorAll('img[data-src]');

function preloadImage(img) {
  img.src = img.dataset.src;
  img.onload = () => {
    img.removeAttribute('data-src');
  };
}

const imgObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      preloadImage(entry.target);
      observer.unobserve(entry.target);
    }
  });
});

images.forEach(img => {
  imgObserver.observe(img);
});

इस उदाहरण में, data-src एट्रिब्यूट इमेज का URL रखता है। इंटरसेक्शन ऑब्जर्वर एपीआई का उपयोग यह पता लगाने के लिए किया जाता है कि इमेज व्यूपोर्ट में कब प्रवेश करती है, जिस बिंदु पर इमेज लोड हो जाती है।

2. लेज़ी लोडिंग वीडियो

इमेजेज के समान, वीडियो भी पेज लोड समय को महत्वपूर्ण रूप से प्रभावित कर सकते हैं। लेज़ी लोडिंग वीडियो उन्हें तब तक लोड होने से रोकती है जब तक उपयोगकर्ता उनके साथ इंटरैक्ट नहीं करता (उदाहरण के लिए, प्ले बटन पर क्लिक करता है)।

उदाहरण (एक प्लेसहोल्डर का उपयोग करके वीडियो को लेज़ी लोड करना):

            

  Video Placeholder

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

3. लेज़ी लोडिंग Iframes

Iframes, जिनका उपयोग अक्सर तीसरे पक्ष के स्रोतों से सामग्री एम्बेड करने के लिए किया जाता है, पेज के प्रदर्शन को भी प्रभावित कर सकते हैं। लेज़ी लोडिंग iframes यह सुनिश्चित करते हैं कि वे केवल तभी लोड होते हैं जब उपयोगकर्ता उनके करीब स्क्रॉल करता है।

उदाहरण (इंटरसेक्शन ऑब्जर्वर एपीआई का उपयोग करके एक iframe को लेज़ी लोड करना):

            const iframes = document.querySelectorAll('iframe[data-src]');

function loadIframe(iframe) {
  iframe.src = iframe.dataset.src;
  iframe.onload = () => {
    iframe.removeAttribute('data-src');
  };
}

const iframeObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      loadIframe(entry.target);
      observer.unobserve(entry.target);
    }
  });
});

iframes.forEach(iframe => {
  iframeObserver.observe(iframe);
});

इमेज लेज़ी लोडिंग उदाहरण के समान, यह कोड इंटरसेक्शन ऑब्जर्वर एपीआई का उपयोग यह पता लगाने के लिए करता है कि iframe व्यूपोर्ट में कब प्रवेश करता है और फिर iframe की सामग्री को लोड करता है।

वेबपैक और डायनामिक इम्पोर्ट्स

वेबपैक एक लोकप्रिय मॉड्यूल बंडलर है जो डायनामिक इम्पोर्ट्स के लिए उत्कृष्ट समर्थन प्रदान करता है। यह स्वचालित रूप से डायनामिक इम्पोर्ट स्टेटमेंट्स का पता लगाता है और आपके कोड को अलग-अलग चंक्स में विभाजित करता है, जिन्हें फिर मांग पर लोड किया जा सकता है।

कॉन्फ़िगरेशन:

वेबपैक में डायनामिक इम्पोर्ट्स को सक्षम करने के लिए आमतौर पर किसी विशेष कॉन्फ़िगरेशन की आवश्यकता नहीं होती है। हालाँकि, आप सुविधाओं का उपयोग करके कोड स्प्लिटिंग को और कॉन्फ़िगर करना चाह सकते हैं जैसे:

उदाहरण (कोड स्प्लिटिंग के लिए वेबपैक कॉन्फ़िगरेशन):

            module.exports = {
  // ...
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
  // ...
};

यह कॉन्फ़िगरेशन वेंडर लाइब्रेरीज (node_modules से कोड) के लिए एक अलग चंक बनाता है और ब्राउज़र कैशिंग को सक्षम करने के लिए प्रत्येक चंक के लिए एक अद्वितीय हैश का उपयोग करता है।

रिएक्ट और डायनामिक इम्पोर्ट्स

रिएक्ट React.lazy() फ़ंक्शन और Suspense कंपोनेंट का उपयोग करके कंपोनेंट्स को लेज़ी लोड करने के लिए अंतर्निहित समर्थन प्रदान करता है। यह रिएक्ट एप्लिकेशनों में कोड स्प्लिटिंग को लागू करना आसान बनाता है।

उदाहरण (एक रिएक्ट कंपोनेंट को लेज़ी लोड करना):

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

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

function App() {
  return (
    Loading...
}> ); } export default App;

React.lazy() फ़ंक्शन एक फ़ंक्शन लेता है जो एक डायनामिक इम्पोर्ट लौटाता है। Suspense कंपोनेंट कंपोनेंट के लोड होने के दौरान एक फ़ॉलबैक UI प्रदान करता है।

एंगुलर और डायनामिक इम्पोर्ट्स

एंगुलर अपने रूटिंग कॉन्फ़िगरेशन का उपयोग करके मॉड्यूल को लेज़ी लोड करने का समर्थन करता है। आप उन रूट्स को परिभाषित कर सकते हैं जो मांग पर मॉड्यूल लोड करते हैं, जो आपके एंगुलर एप्लिकेशन के प्रारंभिक लोड समय में काफी सुधार कर सकता है।

उदाहरण (एंगुलर में एक मॉड्यूल को लेज़ी लोड करना):

            import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

इस उदाहरण में, FeatureModule केवल तभी लोड होता है जब उपयोगकर्ता /feature रूट पर नेविगेट करता है।

वीयू.जेएस और डायनामिक इम्पोर्ट्स

वीयू.जेएस भी डायनामिक इम्पोर्ट्स का उपयोग करके कंपोनेंट्स को लेज़ी लोड करने के लिए समर्थन प्रदान करता है। आप मांग पर कंपोनेंट्स को लोड करने के लिए अपने कंपोनेंट परिभाषाओं के भीतर import() सिंटैक्स का उपयोग कर सकते हैं।

उदाहरण (एक वीयू.जेएस कंपोनेंट को लेज़ी लोड करना):

            Vue.component('async-component', () => ({
  // The component to load. Should be a Promise
  component: import('./AsyncComponent.vue'),
  // A component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded.
  timeout: 3000
}))

यह उदाहरण async-component नामक एक एसिंक्रोनस कंपोनेंट को परिभाषित करता है जो मांग पर AsyncComponent.vue फ़ाइल को लोड करता है। यह लोडिंग, एरर, डिले और टाइमआउट कंपोनेंट्स के लिए विकल्प भी प्रदान करता है।

डायनामिक इम्पोर्ट्स और लेज़ी लोडिंग के लिए सर्वोत्तम अभ्यास

डायनामिक इम्पोर्ट्स और लेज़ी लोडिंग का प्रभावी ढंग से लाभ उठाने के लिए, निम्नलिखित सर्वोत्तम प्रथाओं पर विचार करें:

वैश्विक विचार

जब एक वैश्विक दर्शक के लिए डायनामिक इम्पोर्ट्स और लेज़ी लोडिंग को लागू करते हैं, तो निम्नलिखित पर विचार करना महत्वपूर्ण है:

निष्कर्ष

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