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. ಇಮೇಜ್‌ಗಳ ಲೇಜಿ ಲೋಡಿಂಗ್

ಇಮೇಜ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಪುಟದ ಗಾತ್ರಕ್ಕೆ ಪ್ರಮುಖ ಕಾರಣವಾಗಿರುತ್ತವೆ. ಇಮೇಜ್‌ಗಳ ಲೇಜಿ ಲೋಡಿಂಗ್, ಫೋಲ್ಡ್‌ನ ಕೆಳಗಿರುವ (ಅಂದರೆ, ವ್ಯೂಪೋರ್ಟ್‌ನಲ್ಲಿ ತಕ್ಷಣವೇ ಕಾಣಿಸದ) ಇಮೇಜ್‌ಗಳು ಬಳಕೆದಾರರು ಪುಟವನ್ನು ಕೆಳಗೆ ಸ್ಕ್ರಾಲ್ ಮಾಡಿದಾಗ ಮಾತ್ರ ಲೋಡ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ (ಇಂಟರ್‌ಸೆಕ್ಷನ್ ಅಬ್ಸರ್ವರ್ 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 ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಇಂಟರ್‌ಸೆಕ್ಷನ್ ಅಬ್ಸರ್ವರ್ API ಅನ್ನು ಇಮೇಜ್ ವ್ಯೂಪೋರ್ಟ್‌ಗೆ ಪ್ರವೇಶಿಸಿದಾಗ ಪತ್ತೆಹಚ್ಚಲು ಬಳಸಲಾಗುತ್ತದೆ, ಆ ಹಂತದಲ್ಲಿ ಇಮೇಜ್ ಲೋಡ್ ಆಗುತ್ತದೆ.

2. ವೀಡಿಯೊಗಳ ಲೇಜಿ ಲೋಡಿಂಗ್

ಇಮೇಜ್‌ಗಳಂತೆಯೇ, ವೀಡಿಯೊಗಳು ಸಹ ಪೇಜ್ ಲೋಡ್ ಸಮಯದ ಮೇಲೆ ಗಮನಾರ್ಹ ಪರಿಣಾಮ ಬೀರಬಹುದು. ವೀಡಿಯೊಗಳ ಲೇಜಿ ಲೋಡಿಂಗ್, ಬಳಕೆದಾರರು ಅವುಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುವವರೆಗೆ (ಉದಾ. ಪ್ಲೇ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುವವರೆಗೆ) ಅವು ಲೋಡ್ ಆಗುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

ಉದಾಹರಣೆ (ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಬಳಸಿ ವೀಡಿಯೊವನ್ನು ಲೇಜಿ ಲೋಡ್ ಮಾಡುವುದು):

            

  Video Placeholder

ವೀಡಿಯೊವನ್ನು ಆರಂಭದಲ್ಲಿ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಇಮೇಜ್ ಮೂಲಕ ಪ್ರತಿನಿಧಿಸಲಾಗುತ್ತದೆ. ಬಳಕೆದಾರರು ಪ್ಲೇ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ವೀಡಿಯೊದ ಮೂಲವನ್ನು ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ ಮತ್ತು ವೀಡಿಯೊ ಪ್ಲೇ ಆಗಲು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.

3. ಐಫ್ರೇಮ್‌ಗಳ ಲೇಜಿ ಲೋಡಿಂಗ್

ಐಫ್ರೇಮ್‌ಗಳು, ಸಾಮಾನ್ಯವಾಗಿ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಮೂಲಗಳಿಂದ ವಿಷಯವನ್ನು ಎಂಬೆಡ್ ಮಾಡಲು ಬಳಸಲಾಗುತ್ತದೆ, ಇದು ಪುಟದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೂ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಐಫ್ರೇಮ್‌ಗಳ ಲೇಜಿ ಲೋಡಿಂಗ್, ಬಳಕೆದಾರರು ಅವುಗಳ ಹತ್ತಿರ ಸ್ಕ್ರಾಲ್ ಮಾಡಿದಾಗ ಮಾತ್ರ ಅವು ಲೋಡ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ (ಇಂಟರ್‌ಸೆಕ್ಷನ್ ಅಬ್ಸರ್ವರ್ 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);
});

ಇಮೇಜ್ ಲೇಜಿ ಲೋಡಿಂಗ್ ಉದಾಹರಣೆಯಂತೆಯೇ, ಈ ಕೋಡ್ ಇಂಟರ್‌ಸೆಕ್ಷನ್ ಅಬ್ಸರ್ವರ್ API ಅನ್ನು ಐಫ್ರೇಮ್ ವ್ಯೂಪೋರ್ಟ್‌ಗೆ ಪ್ರವೇಶಿಸಿದಾಗ ಪತ್ತೆಹಚ್ಚಲು ಬಳಸುತ್ತದೆ ಮತ್ತು ನಂತರ ಐಫ್ರೇಮ್‌ನ ವಿಷಯವನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ.

ವೆಬ್‌ಪ್ಯಾಕ್ ಮತ್ತು ಡೈನಾಮಿಕ್ ಇಂಪೋರ್ಟ್ಸ್

ವೆಬ್‌ಪ್ಯಾಕ್ ಒಂದು ಜನಪ್ರಿಯ ಮಾಡ್ಯೂಲ್ ಬಂಡ್ಲರ್ ಆಗಿದ್ದು, ಇದು ಡೈನಾಮಿಕ್ ಇಂಪೋರ್ಟ್‌ಗಳಿಗೆ ಅತ್ಯುತ್ತಮ ಬೆಂಬಲವನ್ನು ನೀಡುತ್ತದೆ. ಇದು ಡೈನಾಮಿಕ್ ಇಂಪೋರ್ಟ್ ಸ್ಟೇಟ್‌ಮೆಂಟ್‌ಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪತ್ತೆಹಚ್ಚುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಪ್ರತ್ಯೇಕ ಚಂಕ್‌ಗಳಾಗಿ ವಿಭಜಿಸುತ್ತದೆ, ಇವುಗಳನ್ನು ನಂತರ ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ಲೋಡ್ ಮಾಡಬಹುದು.

ಕಾನ್ಫಿಗರೇಶನ್:

ವೆಬ್‌ಪ್ಯಾಕ್‌ನಲ್ಲಿ ಡೈನಾಮಿಕ್ ಇಂಪೋರ್ಟ್‌ಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಸಾಮಾನ್ಯವಾಗಿ ಯಾವುದೇ ವಿಶೇಷ ಕಾನ್ಫಿಗರೇಶನ್ ಅಗತ್ಯವಿಲ್ಲ. ಆದಾಗ್ಯೂ, ನೀವು ಈ ಕೆಳಗಿನ ಫೀಚರ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ಅನ್ನು ಮತ್ತಷ್ಟು ಕಾನ್ಫಿಗರ್ ಮಾಡಲು ಬಯಸಬಹುದು:

ಉದಾಹರಣೆ (ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್‌ಗಾಗಿ ವೆಬ್‌ಪ್ಯಾಕ್ ಕಾನ್ಫಿಗರೇಶನ್):

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

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಬಳಕೆದಾರರು /feature ರೂಟ್‌ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದಾಗ ಮಾತ್ರ FeatureModule ಅನ್ನು ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ.

ವ್ಯೂ.ಜೆಎಸ್ ಮತ್ತು ಡೈನಾಮಿಕ್ ಇಂಪೋರ್ಟ್ಸ್

ವ್ಯೂ.ಜೆಎಸ್ ಕೂಡ ಡೈನಾಮಿಕ್ ಇಂಪೋರ್ಟ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಲೇಜಿ ಲೋಡ್ ಮಾಡಲು ಬೆಂಬಲವನ್ನು ನೀಡುತ್ತದೆ. ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ವ್ಯಾಖ್ಯಾನಗಳಲ್ಲಿ ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ನೀವು 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 ಫೈಲ್ ಅನ್ನು ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ಲೋಡ್ ಮಾಡುತ್ತದೆ. ಇದು ಲೋಡಿಂಗ್, ಎರರ್, ಡಿಲೇ, ಮತ್ತು ಟೈಮ್‌ಔಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗಾಗಿ ಆಯ್ಕೆಗಳನ್ನು ಸಹ ಒದಗಿಸುತ್ತದೆ.

ಡೈನಾಮಿಕ್ ಇಂಪೋರ್ಟ್ಸ್ ಮತ್ತು ಲೇಜಿ ಲೋಡಿಂಗ್‌ಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಡೈನಾಮಿಕ್ ಇಂಪೋರ್ಟ್ಸ್ ಮತ್ತು ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಿಕೊಳ್ಳಲು, ಈ ಕೆಳಗಿನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ:

ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಡೈನಾಮಿಕ್ ಇಂಪೋರ್ಟ್ಸ್ ಮತ್ತು ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವಾಗ, ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಪರಿಗಣಿಸುವುದು ನಿರ್ಣಾಯಕ:

ತೀರ್ಮಾನ

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡೈನಾಮಿಕ್ ಇಂಪೋರ್ಟ್‌ಗಳು ಕೋಡ್ ಸ್ಪ್ಲಿಟ್ಟಿಂಗ್ ಮತ್ತು ಲೇಜಿ ಲೋಡಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ವ್ಯವಸ್ಥೆಯನ್ನು ಒದಗಿಸುತ್ತವೆ, ನಿಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಮತ್ತು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ನೀಡಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ರೂಟ್‌ಗಳು, ಕಾಂಪೊನೆಂಟ್‌ಗಳು, ಅಥವಾ ಫೀಚರ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಕಾರ್ಯತಂತ್ರವಾಗಿ ವಿಭಜಿಸುವ ಮೂಲಕ ಮತ್ತು ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಲೇಜಿ ಲೋಡ್ ಮಾಡುವ ಮೂಲಕ, ನೀವು ಆರಂಭಿಕ ಲೋಡ್ ಸಮಯವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಕಡಿಮೆ ಮಾಡಬಹುದು, ಸ್ಪಂದಿಸುವಿಕೆಯನ್ನು ಸುಧಾರಿಸಬಹುದು ಮತ್ತು ಒಟ್ಟಾರೆ ಅಪ್ಲಿಕೇಶನ್ ದಕ್ಷತೆಯನ್ನು ಹೆಚ್ಚಿಸಬಹುದು. ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸಲು, ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳನ್ನು ಪರಿಗಣಿಸಲು ಮತ್ತು ವಿಶ್ವಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗೆ ಸಾಧ್ಯವಾದಷ್ಟು ಉತ್ತಮ ಅನುಭವವನ್ನು ನೀಡುತ್ತಿದ್ದೀರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ನಿರಂತರವಾಗಿ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಮರೆಯದಿರಿ. ಈ ತಂತ್ರಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ, ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಜಾಗತಿಕ ಡಿಜಿಟಲ್ ಭೂದೃಶ್ಯದಲ್ಲಿ ಅಭಿವೃದ್ಧಿ ಹೊಂದುವುದನ್ನು ನೋಡಿ.