M
MLOG
ജാവാസ്ക്രിപ്റ്റ് ഡൈനാമിക് ഇമ്പോർട്ട്സ്: കോഡ് സ്പ്ലിറ്റിംഗും ലേസി ലോഡിംഗും | MLOG | MLOG

ഉപയോക്താവ് "Open Modal" ബട്ടൺ ക്ലിക്കുചെയ്യുമ്പോൾ മാത്രമേ 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. ചിത്രങ്ങൾ ലേസി ലോഡ് ചെയ്യുന്നു

പേജ് വലുപ്പത്തിന് പലപ്പോഴും ഒരു പ്രധാന കാരണം ചിത്രങ്ങളാണ്. ലേസി ലോഡിംഗ് ചിത്രങ്ങൾ, പേജിന്റെ താഴെയുള്ള (അതായത്, വ്യൂപോർട്ടിൽ ഉടൻ ദൃശ്യമാകാത്തവ) ചിത്രങ്ങൾ ഉപയോക്താവ് പേജ് താഴേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ മാത്രം ലോഡ് ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

ഉദാഹരണം (Intersection Observer API ഉപയോഗിച്ച്):

            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 അടങ്ങിയിരിക്കുന്നു. ചിത്രം വ്യൂപോർട്ടിലേക്ക് പ്രവേശിക്കുമ്പോൾ കണ്ടെത്താൻ Intersection Observer API ഉപയോഗിക്കുന്നു, ആ സമയത്ത് ചിത്രം ലോഡ് ചെയ്യപ്പെടുന്നു.

2. വീഡിയോകൾ ലേസി ലോഡ് ചെയ്യുന്നു

ചിത്രങ്ങൾക്ക് സമാനമായി, വീഡിയോകൾക്കും പേജ് ലോഡ് സമയത്തെ കാര്യമായി ബാധിക്കാൻ കഴിയും. ലേസി ലോഡിംഗ് വീഡിയോകൾ ഉപയോക്താവ് അവയുമായി ഇടപഴകുന്നതുവരെ (ഉദാഹരണത്തിന്, ഒരു പ്ലേ ബട്ടൺ ക്ലിക്കുചെയ്യുന്നത് വരെ) ലോഡ് ചെയ്യുന്നത് തടയുന്നു.

ഉദാഹരണം (ഒരു പ്ലേസ്ഹോൾഡർ ഉപയോഗിച്ച് വീഡിയോ ലേസി ലോഡ് ചെയ്യുന്നു):

            

  Video Placeholder

വീഡിയോ തുടക്കത്തിൽ ഒരു പ്ലേസ്ഹോൾഡർ ചിത്രം ഉപയോഗിച്ച് പ്രതിനിധീകരിക്കുന്നു. ഉപയോക്താവ് പ്ലേ ബട്ടൺ ക്ലിക്കുചെയ്യുമ്പോൾ, വീഡിയോ സോഴ്സ് ലോഡ് ചെയ്യുകയും വീഡിയോ പ്ലേ ചെയ്യാൻ തുടങ്ങുകയും ചെയ്യുന്നു.

3. ഐഫ്രെയിമുകൾ (Iframes) ലേസി ലോഡ് ചെയ്യുന്നു

മൂന്നാം കക്ഷി ഉറവിടങ്ങളിൽ നിന്ന് ഉള്ളടക്കം ഉൾപ്പെടുത്താൻ പലപ്പോഴും ഉപയോഗിക്കുന്ന ഐഫ്രെയിമുകൾക്കും പേജ് പ്രകടനത്തെ ബാധിക്കാൻ കഴിയും. ഉപയോക്താവ് അവയ്ക്ക് അടുത്തേക്ക് സ്ക്രോൾ ചെയ്യുമ്പോൾ മാത്രം ഐഫ്രെയിമുകൾ ലോഡ് ചെയ്യപ്പെടുന്നുവെന്ന് ലേസി ലോഡിംഗ് ഉറപ്പാക്കുന്നു.

ഉദാഹരണം (Intersection Observer API ഉപയോഗിച്ച് ഒരു ഐഫ്രെയിം ലേസി ലോഡ് ചെയ്യുന്നു):

            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);
});

ഇമേജ് ലേസി ലോഡിംഗ് ഉദാഹരണത്തിന് സമാനമായി, ഈ കോഡ് ഐഫ്രെയിം വ്യൂപോർട്ടിലേക്ക് പ്രവേശിക്കുമ്പോൾ കണ്ടെത്താനും തുടർന്ന് ഐഫ്രെയിമിന്റെ ഉള്ളടക്കം ലോഡ് ചെയ്യാനും Intersection Observer API ഉപയോഗിക്കുന്നു.

വെബ്പാക്കും ഡൈനാമിക് ഇമ്പോർട്ട്സും

വെബ്പാക്ക് എന്നത് ഡൈനാമിക് ഇമ്പോർട്ട്സിന് മികച്ച പിന്തുണ നൽകുന്ന ഒരു ജനപ്രിയ മൊഡ്യൂൾ ബണ്ട്ലറാണ്. ഇത് ഡൈനാമിക് ഇമ്പോർട്ട് സ്റ്റേറ്റ്മെന്റുകൾ സ്വയമേവ കണ്ടെത്തുകയും നിങ്ങളുടെ കോഡിനെ പ്രത്യേക ചങ്കുകളായി (chunks) വിഭജിക്കുകയും ചെയ്യുന്നു, അവ പിന്നീട് ആവശ്യാനുസരണം ലോഡ് ചെയ്യാൻ കഴിയും.

കോൺഫിഗറേഷൻ:

വെബ്പാക്കിൽ ഡൈനാമിക് ഇമ്പോർട്ട്സ് പ്രവർത്തനക്ഷമമാക്കാൻ സാധാരണയായി പ്രത്യേക കോൺഫിഗറേഷൻ ആവശ്യമില്ല. എന്നിരുന്നാലും, ഇനിപ്പറയുന്നതുപോലുള്ള ഫീച്ചറുകൾ ഉപയോഗിച്ച് കോഡ് സ്പ്ലിറ്റിംഗ് കൂടുതൽ കോൺഫിഗർ ചെയ്യാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം:

ഉദാഹരണം (കോഡ് സ്പ്ലിറ്റിംഗിനായുള്ള വെബ്പാക്ക് കോൺഫിഗറേഷൻ):

            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 കമ്പോണന്റ്, കമ്പോണന്റ് ലോഡ് ചെയ്യുമ്പോൾ ഒരു ഫാൾബാക്ക് യുഐ നൽകുന്നു.

ആംഗുലറും ഡൈനാമിക് ഇമ്പോർട്ട്സും

ആംഗുലർ അതിന്റെ റൂട്ടിംഗ് കോൺഫിഗറേഷൻ ഉപയോഗിച്ച് മൊഡ്യൂളുകൾ ലേസി ലോഡ് ചെയ്യുന്നതിനെ പിന്തുണയ്ക്കുന്നു. ആവശ്യാനുസരണം മൊഡ്യൂളുകൾ ലോഡ് ചെയ്യുന്ന റൂട്ടുകൾ നിങ്ങൾക്ക് നിർവചിക്കാൻ കഴിയും, ഇത് നിങ്ങളുടെ ആംഗുലർ ആപ്ലിക്കേഷന്റെ പ്രാരംഭ ലോഡ് സമയം ഗണ്യമായി മെച്ചപ്പെടുത്താൻ കഴിയും.

ഉദാഹരണം (ആംഗുലറിൽ ഒരു മൊഡ്യൂൾ ലേസി ലോഡ് ചെയ്യുന്നു):

            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 { }

ഈ ഉദാഹരണത്തിൽ, ഉപയോക്താവ് /feature റൂട്ടിലേക്ക് നാവിഗേറ്റ് ചെയ്യുമ്പോൾ മാത്രമേ FeatureModule ലോഡ് ചെയ്യപ്പെടുകയുള്ളൂ.

വ്യൂ.ജെഎസ്സും (Vue.js) ഡൈനാമിക് ഇമ്പോർട്ട്സും

ഡൈനാമിക് ഇമ്പോർട്ട്സ് ഉപയോഗിച്ച് കമ്പോണന്റുകൾ ലേസി ലോഡ് ചെയ്യുന്നതിനും വ്യൂ.ജെഎസ് പിന്തുണ നൽകുന്നു. നിങ്ങളുടെ കമ്പോണന്റ് നിർവചനങ്ങൾക്കുള്ളിൽ ആവശ്യാനുസരണം കമ്പോണന്റുകൾ ലോഡ് ചെയ്യാൻ നിങ്ങൾക്ക് 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 ഫയൽ ലോഡ് ചെയ്യുന്നു. ഇത് ലോഡിംഗ്, എറർ, ഡിലേ, ടൈംഔട്ട് കമ്പോണന്റുകൾക്കുള്ള ഓപ്ഷനുകളും നൽകുന്നു.

ഡൈനാമിക് ഇമ്പോർട്ട്സിനും ലേസി ലോഡിംഗിനുമുള്ള മികച്ച രീതികൾ

ഡൈനാമിക് ഇമ്പോർട്ട്സും ലേസി ലോഡിംഗും ഫലപ്രദമായി പ്രയോജനപ്പെടുത്തുന്നതിന്, ഇനിപ്പറയുന്ന മികച്ച രീതികൾ പരിഗണിക്കുക:

ആഗോള പരിഗണനകൾ

ഒരു ആഗോള പ്രേക്ഷകർക്കായി ഡൈനാമിക് ഇമ്പോർട്ട്സും ലേസി ലോഡിംഗും നടപ്പിലാക്കുമ്പോൾ, ഇനിപ്പറയുന്നവ പരിഗണിക്കേണ്ടത് നിർണായകമാണ്:

ഉപസംഹാരം

ജാവാസ്ക്രിപ്റ്റ് ഡൈനാമിക് ഇമ്പോർട്ട്സ് കോഡ് സ്പ്ലിറ്റിംഗും ലേസി ലോഡിംഗും നടപ്പിലാക്കുന്നതിനുള്ള ഒരു ശക്തമായ സംവിധാനം നൽകുന്നു, ഇത് നിങ്ങളുടെ വെബ് ആപ്ലിക്കേഷന്റെ പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യാനും ആഗോള പ്രേക്ഷകർക്ക് മികച്ച ഉപയോക്തൃ അനുഭവം നൽകാനും നിങ്ങളെ പ്രാപ്തരാക്കുന്നു. റൂട്ടുകൾ, കമ്പോണന്റുകൾ, അല്ലെങ്കിൽ ഫീച്ചറുകൾ എന്നിവയെ അടിസ്ഥാനമാക്കി നിങ്ങളുടെ കോഡ് തന്ത്രപരമായി വിഭജിക്കുന്നതിലൂടെയും ആവശ്യാനുസരണം റിസോഴ്സുകൾ ലേസി ലോഡ് ചെയ്യുന്നതിലൂടെയും, നിങ്ങൾക്ക് പ്രാരംഭ ലോഡ് സമയം ഗണ്യമായി കുറയ്ക്കാനും പ്രതികരണശേഷി മെച്ചപ്പെടുത്താനും മൊത്തത്തിലുള്ള ആപ്ലിക്കേഷൻ കാര്യക്ഷമത വർദ്ധിപ്പിക്കാനും കഴിയും. മികച്ച രീതികൾ പിന്തുടരുക, ആഗോള പരിഗണനകൾ കണക്കിലെടുക്കുക, ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾക്ക് സാധ്യമായ ഏറ്റവും മികച്ച അനുഭവം നൽകുന്നുവെന്ന് ഉറപ്പാക്കാൻ നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രകടനം തുടർച്ചയായി നിരീക്ഷിക്കുക. ഈ സാങ്കേതിക വിദ്യകൾ സ്വീകരിക്കുക, നിങ്ങളുടെ ആപ്ലിക്കേഷൻ ആഗോള ഡിജിറ്റൽ ലാൻഡ്‌സ്‌കേപ്പിൽ അഭിവൃദ്ധി പ്രാപിക്കുന്നത് കാണുക.