M
MLOG
JavaScripti dünaamilised impordid: koodi tükeldamise ja laisa laadimise valdamine | MLOG | MLOG

Komponent Modal laaditakse ainult siis, kui kasutaja klõpsab nuppu "Ava modaalaken".

3. Funktsioonipõhine koodi tükeldamine

See lähenemine keskendub koodi tükeldamisele teie rakenduse selgete funktsioonide või funktsionaalsuste alusel. See on eriti kasulik suurte rakenduste puhul, millel on keerulised funktsioonid, mida kõik kasutajad alati ei vaja. Näiteks võib e-kaubanduse sait laisalt laadida tootearvustuste või sooviloenditega seotud koodi ainult siis, kui kasutaja nende funktsioonidega suhtleb.

Näide (aruandlusfunktsiooni laisk laadimine):

            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;

Komponent ReportingDashboard, mis tõenäoliselt sisaldab keerulisi andmete visualiseerimisi ja analüütika loogikat, laaditakse ainult siis, kui administraator klõpsab nuppu "Näita aruandluslauda".

4. Tingimuslik koodi tükeldamine

See tehnika hõlmab moodulite dünaamilist importimist teatud tingimustel, näiteks kasutaja seadme, brauseri või asukoha alusel. See võimaldab teil kohandada oma rakenduse koodi iga kasutaja konkreetsetele vajadustele, optimeerides veelgi jõudlust ja ressursside kasutust. Kaaluge erinevate pildivormingute (nt WebP toetatud brauserite jaoks) pakkumist või polüfillide laadimist ainult vanemate brauserite jaoks.

Näide (polüfillide laadimine vanemate brauserite jaoks):

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

See kood kontrollib, kas brauser toetab fetch API-t ja Promise. Kui ei, siis impordib see dünaamiliselt vastavad polüfillid.

Laisa laadimise strateegiad

Laisk laadimine on tehnika, mis lükkab ressursside laadimist edasi, kuni neid tegelikult vaja on. See võib oluliselt parandada lehe esialgset laadimisaega ja vähendada ribalaiuse tarbimist. Dünaamilised impordid on võimas tööriist laisa laadimise rakendamiseks JavaScripti rakendustes.

1. Piltide laisk laadimine

Pildid on sageli lehe suuruse peamine panustaja. Piltide laisk laadimine tagab, et pildid, mis asuvad allpool (st need, mis ei ole vaateavas kohe nähtavad), laaditakse ainult siis, kui kasutaja lehte alla kerib.

Näide (kasutades Intersection Observer API-t):

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

Selles näites sisaldab atribuut data-src pildi URL-i. Intersection Observer API-t kasutatakse selleks, et tuvastada, millal pilt siseneb vaateavasse, mille järel pilt laaditakse.

2. Videote laisk laadimine

Sarnaselt piltidega võivad ka videod lehe laadimisaega oluliselt mõjutada. Videote laisk laadimine takistab nende laadimist, kuni kasutaja nendega suhtleb (nt klõpsab esitusnuppu).

Näide (video laisk laadimine kohatäite abil):

            

  Video Placeholder

Videot esindab algselt kohatäite pilt. Kui kasutaja klõpsab esitusnuppu, laaditakse videoallikas ja video hakkab mängima.

3. Iframe'ide laisk laadimine

Iframe'id, mida sageli kasutatakse kolmandate osapoolte sisu manustamiseks, võivad mõjutada ka lehe jõudlust. Iframe'ide laisk laadimine tagab, et need laaditakse ainult siis, kui kasutaja kerib nende lähedale.

Näide (iframe'i laisk laadimine Intersection Observer API abil):

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

Sarnaselt piltide laisa laadimise näitele kasutab see kood Intersection Observer API-t, et tuvastada, millal iframe siseneb vaateavasse, ja seejärel laadib iframe'i sisu.

Webpack ja dünaamilised impordid

Webpack on populaarne moodulikimpija, mis pakub suurepärast tuge dünaamilistele importidele. See tuvastab automaatselt dünaamilised impordilaused ja tükeldab teie koodi eraldi tükkideks, mida saab seejärel nõudmisel laadida.

Konfiguratsioon:

Tavaliselt ei ole vaja spetsiaalset konfiguratsiooni, et lubada dünaamilisi importi Webpackis. Kuid võiksite koodi tükeldamist täiendavalt konfigureerida, kasutades selliseid funktsioone nagu:

Näide (Webpacki konfiguratsioon koodi tükeldamiseks):

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

See konfiguratsioon loob eraldi tüki tarnijaraamatukogude jaoks (kood node_modules-ist) ja kasutab iga tüki jaoks unikaalset räsi, et võimaldada brauseri vahemälu.

React ja dünaamilised impordid

React pakub sisseehitatud tuge komponentide laisaks laadimiseks, kasutades funktsiooni React.lazy() ja komponenti Suspense. See muudab koodi tükeldamise Reacti rakendustes lihtsaks.

Näide (Reacti komponendi laisk laadimine):

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

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

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

Funktsioon React.lazy() võtab vastu funktsiooni, mis tagastab dünaamilise impordi. Komponent Suspense pakub varukeskust, kui komponent laaditakse.

Angular ja dünaamilised impordid

Angular toetab moodulite laiska laadimist, kasutades oma marsruutimiskonfiguratsiooni. Saate määratleda marsruute, mis laadivad mooduleid nõudmisel, mis võib oluliselt parandada teie Angulari rakenduse esialgset laadimisaega.

Näide (mooduli laisk laadimine Angularis):

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

Selles näites laaditakse FeatureModule ainult siis, kui kasutaja navigeerib marsruudile /feature.

Vue.js ja dünaamilised impordid

Vue.js pakub ka tuge komponentide laisaks laadimiseks, kasutades dünaamilisi importi. Saate kasutada süntaksit import() oma komponendi määratlustes, et komponente nõudmisel laadida.

Näide (Vue.js komponendi laisk laadimine):

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

See näide määratleb asünkroonse komponendi nimega async-component, mis laadib faili AsyncComponent.vue nõudmisel. See pakub ka võimalusi laadimis-, vea-, viivitus- ja ajakomponente jaoks.

Parimad tavad dünaamiliste importide ja laisa laadimise jaoks

Dünaamiliste importide ja laisa laadimise tõhusaks kasutamiseks kaaluge järgmisi parimaid tavasid:

Globaalsed kaalutlused

Kui rakendate dünaamilisi importi ja laiska laadimist globaalsele publikule, on oluline arvestada järgmisega:

Kokkuvõte

JavaScripti dünaamilised impordid pakuvad võimsa mehhanismi koodi tükeldamise ja laisa laadimise rakendamiseks, võimaldades teil optimeerida oma veebirakenduse jõudlust ja pakkuda suurepärast kasutajakogemust globaalsele publikule. Tükeldades oma koodi strateegiliselt marsruutide, komponentide või funktsioonide alusel ning laadides ressursse laisalt nõudmisel, saate oluliselt vähendada esialgseid laadimisaegu, parandada reageerimisvõimet ja suurendada rakenduse üldist tõhusust. Ärge unustage järgida parimaid tavasid, arvestada globaalsete kaalutlustega ja jälgida pidevalt oma rakenduse jõudlust, et tagada kasutajatele kogu maailmas parim võimalik kogemus. Võtke need tehnikad omaks ja vaadake, kuidas teie rakendus globaalsel digitaalsel maastikul õitseb.