M
MLOG
JavaScriptin dynaamiset importit: koodin pilkkomisen ja laiskalatauksen hallinta | MLOG | MLOG

Modal-komponentti ladataan vain, kun käyttäjä napsauttaa "Avaa modaali" -painiketta.

3. Ominaisuuspohjainen koodin pilkkominen

Tämä lähestymistapa keskittyy koodin pilkkomiseen sovelluksen erillisten ominaisuuksien tai toiminnallisuuksien perusteella. Tämä on erityisen hyödyllistä suurissa sovelluksissa, joissa on monimutkaisia ominaisuuksia, joita kaikki käyttäjät eivät aina tarvitse. Esimerkiksi verkkokauppasivusto voisi laiskaladata tuotearvosteluihin tai toivelistoihin liittyvän koodin vain, kun käyttäjä on vuorovaikutuksessa näiden ominaisuuksien kanssa.

Esimerkki (raportointiominaisuuden laiskalataus):

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

ReportingDashboard-komponentti, joka todennäköisesti sisältää monimutkaista datan visualisointia ja analytiikkalogiikkaa, ladataan vain, kun järjestelmänvalvoja napsauttaa "Näytä raportoinnin koontinäyttö" -painiketta.

4. Ehdollinen koodin pilkkominen

Tämä tekniikka sisältää moduulien dynaamisen tuonnin tiettyjen ehtojen perusteella, kuten käyttäjän laitteen, selaimen tai sijainnin mukaan. Tämä mahdollistaa sovelluksen koodin räätälöinnin kunkin käyttäjän erityistarpeisiin, mikä optimoi suorituskykyä ja resurssien käyttöä entisestään. Harkitse erilaisten kuvamuotojen (esim. WebP tuetuille selaimille) tarjoamista tai polyfillien lataamista vain vanhemmille selaimille.

Esimerkki (polyfillien lataaminen vanhemmille selaimille):

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

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

loadPolyfills();

Tämä koodi tarkistaa, tukeeko selain fetch-API:a ja Promise-objektia. Jos ei, se tuo dynaamisesti vastaavat polyfillit.

Laiskalatausstrategiat

Laiskalataus on tekniikka, joka lykkää resurssien lataamista, kunnes niitä todella tarvitaan. Tämä voi parantaa merkittävästi sivun ensilatausaikoja ja vähentää kaistanleveyden kulutusta. Dynaamiset importit ovat tehokas työkalu laiskalatauksen toteuttamiseen JavaScript-sovelluksissa.

1. Kuvien laiskalataus

Kuvat ovat usein merkittävä osa sivun kokoa. Kuvien laiskalataus varmistaa, että näkymän ulkopuolella (eli ne, jotka eivät ole heti näkyvissä näkymäikkunassa) olevat kuvat ladataan vasta, kun käyttäjä vierittää sivua alaspäin.

Esimerkki (käyttäen Intersection Observer API:a):

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

Tässä esimerkissä data-src-attribuutti sisältää kuvan URL-osoitteen. Intersection Observer API:a käytetään havaitsemaan, milloin kuva tulee näkymäikkunaan, jolloin kuva ladataan.

2. Videoiden laiskalataus

Kuvien tapaan myös videot voivat vaikuttaa merkittävästi sivun latausaikoihin. Videoiden laiskalataus estää niiden lataamisen, kunnes käyttäjä on vuorovaikutuksessa niiden kanssa (esim. napsauttaa toistopainiketta).

Esimerkki (videon laiskalataus paikkamerkin avulla):

            

  Videon paikkamerkki

Video on aluksi esitetty paikkamerkkikuvalla. Kun käyttäjä napsauttaa toistopainiketta, videon lähde ladataan ja video alkaa toistua.

3. Iframe-kehysten laiskalataus

Iframe-kehykset, joita käytetään usein sisällön upottamiseen kolmansien osapuolten lähteistä, voivat myös vaikuttaa sivun suorituskykyyn. Iframe-kehysten laiskalataus varmistaa, että ne ladataan vasta, kun käyttäjä vierittää niiden lähelle.

Esimerkki (iframe-kehyksen laiskalataus käyttäen Intersection Observer API:a):

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

Kuten kuvan laiskalatausesimerkissä, tämä koodi käyttää Intersection Observer API:a havaitsemaan, milloin iframe tulee näkymäikkunaan, ja lataa sitten iframen sisällön.

Webpack ja dynaamiset importit

Webpack on suosittu moduulien niputtaja, joka tarjoaa erinomaisen tuen dynaamisille importeille. Se tunnistaa automaattisesti dynaamiset import-lauseet ja jakaa koodisi erillisiin osiin (chunks), jotka voidaan sitten ladata tarpeen mukaan.

Konfiguraatio:

Webpackissa dynaamisten importtien käyttöönotto ei yleensä vaadi erityistä konfiguraatiota. Haluat ehkä kuitenkin määrittää koodin pilkkomista tarkemmin käyttämällä ominaisuuksia, kuten:

Esimerkki (Webpack-konfiguraatio koodin pilkkomiseen):

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

Tämä konfiguraatio luo erillisen osan toimittajakirjastoille (koodi node_modules-kansiosta) ja käyttää yksilöllistä hajautusarvoa (hash) kullekin osalle selaimen välimuistin hyödyntämiseksi.

React ja dynaamiset importit

React tarjoaa sisäänrakennetun tuen komponenttien laiskalataukselle käyttämällä React.lazy()-funktiota ja Suspense-komponenttia. Tämä tekee koodin pilkkomisen toteuttamisesta helppoa React-sovelluksissa.

Esimerkki (React-komponentin laiskalataus):

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

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

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

React.lazy()-funktio ottaa argumentiksi funktion, joka palauttaa dynaamisen importin. Suspense-komponentti tarjoaa varakäyttöliittymän komponentin latautuessa.

Angular ja dynaamiset importit

Angular tukee moduulien laiskalatausta reitityskonfiguraationsa avulla. Voit määrittää reittejä, jotka lataavat moduuleja tarpeen mukaan, mikä voi merkittävästi parantaa Angular-sovelluksesi ensilatausaikaa.

Esimerkki (moduulin laiskalataus Angularissa):

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

Tässä esimerkissä FeatureModule ladataan vain, kun käyttäjä siirtyy /feature-reitille.

Vue.js ja dynaamiset importit

Myös Vue.js tarjoaa tuen komponenttien laiskalataukselle dynaamisten importtien avulla. Voit käyttää import()-syntaksia komponenttimäärityksissäsi ladataksesi komponentteja tarpeen mukaan.

Esimerkki (Vue.js-komponentin laiskalataus):

            Vue.component('async-component', () => ({
  // Ladattava komponentti. Tulee olla Promise
  component: import('./AsyncComponent.vue'),
  // Komponentti, jota käytetään asynkronisen komponentin latautuessa
  loading: LoadingComponent,
  // Komponentti, jota käytetään, jos lataus epäonnistuu
  error: ErrorComponent,
  // Viive ennen latauskomponentin näyttämistä. Oletus: 200ms.
  delay: 200,
  // Virhekomponentti näytetään, jos aikaraja on
  // määritetty ja se ylittyy.
  timeout: 3000
}))

Tämä esimerkki määrittelee asynkronisen komponentin nimeltä async-component, joka lataa AsyncComponent.vue-tiedoston tarpeen mukaan. Se tarjoaa myös asetuksia lataus-, virhe-, viive- ja aikarajakomponenteille.

Parhaat käytännöt dynaamisille importeille ja laiskalataukselle

Hyödyntääksesi tehokkaasti dynaamisia importteja ja laiskalatausta, harkitse seuraavia parhaita käytäntöjä:

Maailmanlaajuiset näkökohdat

Kun toteutat dynaamisia importteja ja laiskalatausta maailmanlaajuiselle yleisölle, on tärkeää ottaa huomioon seuraavat seikat:

Yhteenveto

JavaScriptin dynaamiset importit tarjoavat tehokkaan mekanismin koodin pilkkomisen ja laiskalatauksen toteuttamiseen, mikä mahdollistaa verkkosovelluksesi suorituskyvyn optimoinnin ja ylivoimaisen käyttäjäkokemuksen tarjoamisen maailmanlaajuiselle yleisölle. Jakamalla koodisi strategisesti reittien, komponenttien tai ominaisuuksien perusteella ja laiskalataamalla resursseja tarpeen mukaan voit merkittävästi lyhentää ensilatausaikoja, parantaa responsiivisuutta ja tehostaa sovelluksen yleistä toimintaa. Muista noudattaa parhaita käytäntöjä, ottaa huomioon maailmanlaajuiset näkökohdat ja seurata jatkuvasti sovelluksesi suorituskykyä varmistaaksesi, että tarjoat parhaan mahdollisen kokemuksen käyttäjille kaikkialla maailmassa. Ota nämä tekniikat käyttöön ja seuraa sovelluksesi menestystä globaalissa digitaalisessa maisemassa.