M
MLOG
JavaScript Dynamische Imports: Beheers Code Splitting en Lazy Loading | MLOG | MLOG

Het Modal-component wordt alleen geladen wanneer de gebruiker op de knop "Open Modal" klikt.

3. Feature-Gebaseerde Code Splitting

Deze aanpak richt zich op het splitsen van code op basis van afzonderlijke features of functionaliteiten binnen uw applicatie. Dit is met name handig voor grote applicaties met complexe features die niet altijd door alle gebruikers nodig zijn. Een e-commercesite kan bijvoorbeeld code met betrekking tot productrecensies of verlanglijstjes 'lazy-loaden' en pas laden wanneer de gebruiker met die features interacteert.

Voorbeeld (lazy loading van een rapportage-feature):

            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 && (
        Rapportage laden...
}>
          
        
      )}
); } export default AdminPanel;

Het ReportingDashboard-component, dat waarschijnlijk complexe datavisualisaties en analyse-logica bevat, wordt alleen geladen wanneer de beheerder op de knop "Toon Rapportage Dashboard" klikt.

4. Conditionele Code Splitting

Deze techniek omvat het dynamisch importeren van modules op basis van bepaalde voorwaarden, zoals het apparaat, de browser of de locatie van de gebruiker. Hiermee kunt u de code van uw applicatie afstemmen op de specifieke behoeften van elke gebruiker, waardoor de prestaties en het resourcegebruik verder worden geoptimaliseerd. Overweeg het aanbieden van verschillende afbeeldingsformaten (bijv. WebP voor ondersteunde browsers) of het laden van polyfills alleen voor oudere browsers.

Voorbeeld (polyfills laden voor oudere browsers):

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

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

loadPolyfills();

Deze code controleert of de fetch API en Promise worden ondersteund door de browser. Zo niet, dan importeert het dynamisch de bijbehorende polyfills.

Lazy Loading-Strategieën

Lazy loading is een techniek die het laden van resources uitstelt totdat ze daadwerkelijk nodig zijn. Dit kan de initiële laadtijden van pagina's aanzienlijk verbeteren en het bandbreedteverbruik verminderen. Dynamische imports zijn een krachtig hulpmiddel voor het implementeren van lazy loading in JavaScript-applicaties.

1. Lazy Loading van Afbeeldingen

Afbeeldingen dragen vaak aanzienlijk bij aan de paginagrootte. Lazy loading van afbeeldingen zorgt ervoor dat afbeeldingen onder de vouw (d.w.z. degenen die niet onmiddellijk zichtbaar zijn in de viewport) pas worden geladen wanneer de gebruiker naar beneden scrolt.

Voorbeeld (met de 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);
});

In dit voorbeeld bevat het data-src-attribuut de URL van de afbeelding. De Intersection Observer API wordt gebruikt om te detecteren wanneer de afbeelding in de viewport komt, waarna de afbeelding wordt geladen.

2. Lazy Loading van Video's

Net als afbeeldingen kunnen video's ook de laadtijd van pagina's aanzienlijk beïnvloeden. Lazy loading van video's voorkomt dat ze worden geladen totdat de gebruiker ermee interageert (bijv. op een afspeelknop klikt).

Voorbeeld (lazy loading van een video met een placeholder):

            

  Video Platzbekleder

De video wordt aanvankelijk weergegeven door een placeholder-afbeelding. Wanneer de gebruiker op de afspeelknop klikt, wordt de videobron geladen en begint de video af te spelen.

3. Lazy Loading van Iframes

Iframes, die vaak worden gebruikt om inhoud van derden in te sluiten, kunnen ook de prestaties van de pagina beïnvloeden. Lazy loading van iframes zorgt ervoor dat ze pas worden geladen wanneer de gebruiker er dichtbij scrolt.

Voorbeeld (lazy loading van een iframe met de 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);
});

Net als in het voorbeeld voor het 'lazy-loaden' van afbeeldingen, gebruikt deze code de Intersection Observer API om te detecteren wanneer de iframe in de viewport komt en laadt dan de inhoud van de iframe.

Webpack en Dynamische Imports

Webpack is een populaire modulebundler die uitstekende ondersteuning biedt voor dynamische imports. Het detecteert automatisch dynamische import-instructies en splitst uw code op in afzonderlijke chunks, die vervolgens op aanvraag kunnen worden geladen.

Configuratie:

Normaal gesproken is er geen speciale configuratie nodig om dynamische imports in Webpack in te schakelen. U kunt echter de code splitting verder configureren door functies te gebruiken zoals:

Voorbeeld (Webpack-configuratie voor code splitting):

            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',
        },
      },
    },
  },
  // ...
};

Deze configuratie creëert een aparte chunk voor vendor-bibliotheken (code uit node_modules) en gebruikt een unieke hash voor elke chunk om browsercaching mogelijk te maken.

React en Dynamische Imports

React biedt ingebouwde ondersteuning voor het 'lazy-loaden' van componenten met de React.lazy()-functie en het Suspense-component. Dit maakt het eenvoudig om code splitting te implementeren in React-applicaties.

Voorbeeld (lazy loading van een React component):

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

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

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

De React.lazy()-functie accepteert een functie die een dynamische import retourneert. Het Suspense-component biedt een fallback-UI terwijl het component wordt geladen.

Angular en Dynamische Imports

Angular ondersteunt het 'lazy-loaden' van modules via de routeringsconfiguratie. U kunt routes definiëren die modules op aanvraag laden, wat de initiële laadtijd van uw Angular-applicatie aanzienlijk kan verbeteren.

Voorbeeld (lazy loading van een module in Angular):

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

In dit voorbeeld wordt de FeatureModule alleen geladen wanneer de gebruiker naar de /feature-route navigeert.

Vue.js en Dynamische Imports

Vue.js biedt ook ondersteuning voor het 'lazy-loaden' van componenten met behulp van dynamische imports. U kunt de import()-syntaxis gebruiken binnen uw componentdefinities om componenten op aanvraag te laden.

Voorbeeld (lazy loading van een Vue.js component):

            Vue.component('async-component', () => ({
  // Het te laden component. Moet een Promise zijn
  component: import('./AsyncComponent.vue'),
  // Een component om te gebruiken terwijl het async component laadt
  loading: LoadingComponent,
  // Een component om te gebruiken als het laden mislukt
  error: ErrorComponent,
  // Vertraging voordat het laadcomponent wordt getoond. Standaard: 200ms.
  delay: 200,
  // Het foutcomponent wordt weergegeven als een timeout is
  // opgegeven en overschreden.
  timeout: 3000
}))

Dit voorbeeld definieert een asynchroon component met de naam async-component dat het bestand AsyncComponent.vue op aanvraag laadt. Het biedt ook opties voor laad-, fout-, vertragings- en timeout-componenten.

Best Practices voor Dynamische Imports en Lazy Loading

Om effectief gebruik te maken van dynamische imports en lazy loading, overweeg de volgende best practices:

Wereldwijde Overwegingen

Bij het implementeren van dynamische imports en lazy loading voor een wereldwijd publiek, is het cruciaal om rekening te houden met het volgende:

Conclusie

JavaScript dynamische imports bieden een krachtig mechanisme voor het implementeren van code splitting en lazy loading, waardoor u de prestaties van uw webapplicatie kunt optimaliseren en een superieure gebruikerservaring kunt bieden aan een wereldwijd publiek. Door uw code strategisch te splitsen op basis van routes, componenten of features, en door resources op aanvraag te 'lazy-loaden', kunt u de initiële laadtijden aanzienlijk verkorten, de responsiviteit verbeteren en de algehele efficiëntie van de applicatie verhogen. Vergeet niet de best practices te volgen, rekening te houden met wereldwijde overwegingen en de prestaties van uw applicatie continu te monitoren om ervoor te zorgen dat u de best mogelijke ervaring biedt aan gebruikers wereldwijd. Omarm deze technieken en zie hoe uw applicatie floreert in het wereldwijde digitale landschap.