M
MLOG
JavaScript Dynamiske Importer: Mestre Kodesplitting og Lazy Loading | MLOG | MLOG

Modal-komponenten lastes kun når brukeren klikker på "Åpne Modal"-knappen.

3. Funksjonsbasert Kodesplitting

Denne tilnærmingen fokuserer på å splitte kode basert på distinkte funksjoner eller funksjonaliteter i applikasjonen din. Dette er spesielt nyttig for store applikasjoner med komplekse funksjoner som ikke alltid trengs av alle brukere. For eksempel kan en e-handelsside "lazy"-laste kode relatert til produktanmeldelser eller ønskelister kun når brukeren interagerer med disse funksjonene.

Eksempel ("lazy loading" av en rapporteringsfunksjon):

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

ReportingDashboard-komponenten, som sannsynligvis inneholder komplekse datavisualiseringer og analyse-logikk, lastes kun når administratoren klikker på "Vis Rapporteringspanel"-knappen.

4. Betinget Kodesplitting

Denne teknikken innebærer dynamisk importering av moduler basert på visse betingelser, som brukerens enhet, nettleser eller plassering. Dette lar deg skreddersy applikasjonens kode til de spesifikke behovene til hver bruker, og ytterligere optimalisere ytelse og ressursbruk. Vurder å servere forskjellige bildeformater (f.eks. WebP for støttede nettlesere) eller laste polyfills kun for eldre nettlesere.

Eksempel (lasting av polyfills for eldre nettlesere):

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

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

loadPolyfills();

Denne koden sjekker om fetch API-et og Promise støttes av nettleseren. Hvis ikke, importerer den dynamisk de tilsvarende polyfills.

Strategier for Lazy Loading

"Lazy loading" er en teknikk som utsetter lasting av ressurser til de faktisk trengs. Dette kan forbedre innledende sidelastingstider betydelig og redusere båndbreddeforbruket. Dynamiske importer er et kraftig verktøy for å implementere "lazy loading" i JavaScript-applikasjoner.

1. Lazy Loading av Bilder

Bilder er ofte en stor bidragsyter til sidestørrelse. "Lazy loading" av bilder sikrer at bilder under "folden" (dvs. de som ikke er umiddelbart synlige i visningsporten) kun lastes når brukeren ruller nedover siden.

Eksempel (ved bruk av 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);
});

I dette eksempelet inneholder data-src-attributtet URL-en til bildet. Intersection Observer API-et brukes til å oppdage når bildet kommer inn i visningsporten, og da lastes bildet.

2. Lazy Loading av Videoer

I likhet med bilder kan også videoer ha en betydelig innvirkning på sidelastingstider. "Lazy loading" av videoer forhindrer at de lastes før brukeren interagerer med dem (f.eks. klikker på en avspillingsknapp).

Eksempel ("lazy loading" av en video ved hjelp av en plassholder):

            

  Videoplassholder

Videoen representeres i utgangspunktet av et plassholderbilde. Når brukeren klikker på avspillingsknappen, lastes videokilden og videoen begynner å spille.

3. Lazy Loading av Iframes

Iframes, som ofte brukes til å bygge inn innhold fra tredjepartskilder, kan også påvirke sideytelsen. "Lazy loading" av iframes sikrer at de kun lastes når brukeren ruller nær dem.

Eksempel ("lazy loading" av en iframe ved bruk av 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);
});

I likhet med eksempelet for "lazy loading" av bilder, bruker denne koden Intersection Observer API-et for å oppdage når iframen kommer inn i visningsporten og laster deretter innholdet i iframen.

Webpack og Dynamiske Importer

Webpack er en populær modul-bundler som gir utmerket støtte for dynamiske importer. Den oppdager automatisk dynamiske import-setninger og splitter koden din i separate "chunks", som deretter kan lastes ved behov.

Konfigurasjon:

Ingen spesiell konfigurasjon er vanligvis nødvendig for å aktivere dynamiske importer i Webpack. Du vil kanskje imidlertid konfigurere kodesplitting ytterligere ved å bruke funksjoner som:

Eksempel (Webpack-konfigurasjon for kodesplitting):

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

Denne konfigurasjonen lager en separat "chunk" for leverandørbiblioteker (kode fra node_modules) og bruker en unik hash for hver "chunk" for å muliggjøre nettleser-caching.

React og Dynamiske Importer

React gir innebygd støtte for "lazy loading" av komponenter ved hjelp av React.lazy()-funksjonen og Suspense-komponenten. Dette gjør det enkelt å implementere kodesplitting i React-applikasjoner.

Eksempel ("lazy loading" av en React-komponent):

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

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

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

React.lazy()-funksjonen tar en funksjon som returnerer en dynamisk import. Suspense-komponenten gir et reserve-UI mens komponenten lastes.

Angular og Dynamiske Importer

Angular støtter "lazy loading" av moduler ved hjelp av sin ruting-konfigurasjon. Du kan definere ruter som laster moduler ved behov, noe som kan forbedre den innledende lastetiden til Angular-applikasjonen din betydelig.

Eksempel ("lazy loading" av en modul i 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 { }

I dette eksempelet lastes FeatureModule kun når brukeren navigerer til /feature-ruten.

Vue.js og Dynamiske Importer

Vue.js gir også støtte for "lazy loading" av komponenter ved hjelp av dynamiske importer. Du kan bruke import()-syntaksen i komponentdefinisjonene dine for å laste komponenter ved behov.

Eksempel ("lazy loading" av en Vue.js-komponent):

            Vue.component('async-component', () => ({
  // Komponenten som skal lastes. Bør være et Promise
  component: import('./AsyncComponent.vue'),
  // En komponent som brukes mens den asynkrone komponenten laster
  loading: LoadingComponent,
  // En komponent som brukes hvis lastingen mislykkes
  error: ErrorComponent,
  // Forsinkelse før lastekomponenten vises. Standard: 200 ms.
  delay: 200,
  // Feilkomponenten vil bli vist hvis en tidsavbrudd er
  // angitt og overskredet.
  timeout: 3000
}))

Dette eksempelet definerer en asynkron komponent kalt async-component som laster AsyncComponent.vue-filen ved behov. Den gir også alternativer for laste-, feil-, forsinkelses- og tidsavbruddskomponenter.

Beste Praksis for Dynamiske Importer og Lazy Loading

For å effektivt utnytte dynamiske importer og "lazy loading", bør du vurdere følgende beste praksis:

Globale Hensyn

Når du implementerer dynamiske importer og "lazy loading" for et globalt publikum, er det avgjørende å vurdere følgende:

Konklusjon

JavaScript dynamiske importer gir en kraftig mekanisme for å implementere kodesplitting og "lazy loading", som lar deg optimalisere ytelsen til webapplikasjonen din og levere en overlegen brukeropplevelse for et globalt publikum. Ved å strategisk splitte koden din basert på ruter, komponenter eller funksjoner, og ved å "lazy"-laste ressurser ved behov, kan du redusere innledende lastetider betydelig, forbedre responsiviteten og øke den generelle applikasjonseffektiviteten. Husk å følge beste praksis, vurdere globale hensyn, og kontinuerlig overvåke applikasjonens ytelse for å sikre at du leverer den best mulige opplevelsen til brukere over hele verden. Omfavn disse teknikkene, og se applikasjonen din trives i det globale digitale landskapet.