M
MLOG
JavaScript dinamikus importok: A kód felosztásának és a lusta betöltésének elsajátítása | MLOG | MLOG

A Modal összetevő csak akkor töltődik be, amikor a felhasználó a "Modális megnyitása" gombra kattint.

3. Funkcióalapú kód felosztás

Ez a megközelítés a kód felosztására összpontosít az alkalmazáson belüli különálló funkciók vagy funkcionalitások alapján. Ez különösen hasznos a nagyméretű alkalmazásokhoz, amelyek olyan összetett funkciókkal rendelkeznek, amelyekre nem mindig van szükségük az összes felhasználónak. Például egy e-kereskedelmi oldal lustán betöltheti a termékértékelésekkel vagy a kívánságlistákkal kapcsolatos kódot, csak akkor, ha a felhasználó interakcióba lép ezekkel a funkciókkal.

Példa (egy jelentéskészítési funkció lusta betöltése):

            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;

A ReportingDashboard összetevő, amely valószínűleg összetett adatvizualizációkat és analitikai logikát tartalmaz, csak akkor töltődik be, amikor a rendszergazda a "Jelentéskészítési irányítópult megjelenítése" gombra kattint.

4. Feltételes kód felosztás

Ez a technika magában foglalja a modulok dinamikus importálását bizonyos feltételek alapján, például a felhasználó eszköze, böngészője vagy helye alapján. Ez lehetővé teszi, hogy az alkalmazás kódját az egyes felhasználók egyedi igényeihez igazítsa, tovább optimalizálva a teljesítményt és az erőforrás-kihasználást. Fontolja meg a különböző képformátumok (pl. WebP a támogatott böngészők számára) kiszolgálását, vagy a polyfill-ek betöltését csak a régebbi böngészők számára.

Példa (polyfill-ek betöltése régebbi böngészőkhöz):

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

Ez a kód ellenőrzi, hogy a fetch API és a Promise támogatott-e a böngészőben. Ha nem, akkor dinamikusan importálja a megfelelő polyfill-eket.

Lusta betöltési stratégiák

A lusta betöltés egy olyan technika, amely elhalasztja az erőforrások betöltését, amíg ténylegesen szükség nincs rájuk. Ez jelentősen javíthatja a kezdeti oldalbetöltési időket és csökkentheti a sávszélesség-felhasználást. A dinamikus importok hatékony eszközt jelentenek a lusta betöltés megvalósításához a JavaScript alkalmazásokban.

1. Képek lusta betöltése

A képek gyakran jelentős mértékben hozzájárulnak az oldal méretéhez. A képek lusta betöltése biztosítja, hogy a hajtás alatt lévő képek (azaz azok, amelyek nem láthatók azonnal a nézetablakban) csak akkor töltődjenek be, amikor a felhasználó lefelé görget az oldalon.

Példa (az Intersection Observer API használatával):

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

Ebben a példában a data-src attribútum tárolja a kép URL-jét. Az Intersection Observer API segítségével érzékeljük, amikor a kép belép a nézetablakba, ekkor a kép betöltődik.

2. Videók lusta betöltése

A képekhez hasonlóan a videók is jelentősen befolyásolhatják az oldalbetöltési időket. A videók lusta betöltése megakadályozza, hogy azok betöltődjenek, amíg a felhasználó nem lép velük interakcióba (pl. rákattint egy lejátszás gombra).

Példa (egy videó lusta betöltése egy helyőrző használatával):

            

  Video Placeholder

A videót kezdetben egy helyőrző kép képviseli. Amikor a felhasználó a lejátszás gombra kattint, a videó forrása betöltődik, és a videó elindul.

3. Iframes lusta betöltése

Az iframes-ek, amelyeket gyakran használnak harmadik féltől származó tartalom beágyazására, szintén befolyásolhatják az oldal teljesítményét. Az iframes-ek lusta betöltése biztosítja, hogy azok csak akkor töltődjenek be, amikor a felhasználó közel görget hozzájuk.

Példa (egy iframe lusta betöltése az Intersection Observer API használatával):

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

A kép lusta betöltési példájához hasonlóan ez a kód az Intersection Observer API-t használja annak észlelésére, hogy az iframe belépett-e a nézetablakba, majd betölti az iframe tartalmát.

Webpack és dinamikus importok

A Webpack egy népszerű modulcsomagoló, amely kiváló támogatást nyújt a dinamikus importokhoz. Automatikusan felismeri a dinamikus import utasításokat, és külön darabokra osztja a kódot, amelyek aztán igény szerint betölthetők.

Konfiguráció:

A dinamikus importok engedélyezéséhez a Webpackben általában nincs szükség különleges konfigurációra. Előfordulhat azonban, hogy tovább szeretné konfigurálni a kód felosztását olyan funkciók használatával, mint:

Példa (Webpack konfiguráció kód felosztáshoz):

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

Ez a konfiguráció külön darabot hoz létre a szállítói könyvtárakhoz (a node_modules mappából származó kód), és egyedi hash-t használ minden darabhoz a böngésző gyorsítótárazásának engedélyezéséhez.

React és dinamikus importok

A React beépített támogatást nyújt az összetevők lusta betöltéséhez a React.lazy() függvénnyel és a Suspense összetevővel. Ez megkönnyíti a kód felosztásának megvalósítását a React alkalmazásokban.

Példa (egy React összetevő lusta betöltése):

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

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

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

A React.lazy() függvény egy olyan függvényt vesz fel, amely egy dinamikus importot ad vissza. A Suspense összetevő tartalék felhasználói felületet biztosít, amíg az összetevő betöltődik.

Angular és dinamikus importok

Az Angular támogatja a modulok lusta betöltését az útválasztási konfigurációja segítségével. Meghatározhat olyan útvonalakat, amelyek igény szerint töltik be a modulokat, ami jelentősen javíthatja az Angular alkalmazás kezdeti betöltési idejét.

Példa (egy modul lusta betöltése az Angularban):

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

Ebben a példában a FeatureModule csak akkor töltődik be, amikor a felhasználó a /feature útvonalra navigál.

Vue.js és dinamikus importok

A Vue.js támogatja az összetevők lusta betöltését dinamikus importok használatával. Az import() szintaxist használhatja az összetevődefiníciókban az összetevők igény szerinti betöltéséhez.

Példa (egy Vue.js összetevő lusta betöltése):

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

Ez a példa egy async-component nevű aszinkron összetevőt definiál, amely igény szerint tölti be az AsyncComponent.vue fájlt. Emellett lehetőségeket kínál a betöltési, hiba-, késleltetési és időtúllépési összetevőkhöz.

Bevált gyakorlatok dinamikus importokhoz és lusta betöltéshez

A dinamikus importok és a lusta betöltés hatékony kihasználásához vegye figyelembe a következő bevált gyakorlatokat:

Globális szempontok

A dinamikus importok és a lusta betöltés globális közönség számára történő megvalósításakor elengedhetetlen a következők figyelembevétele:

Következtetés

A JavaScript dinamikus importok hatékony mechanizmust biztosítanak a kód felosztásának és a lusta betöltés megvalósításához, lehetővé téve a webalkalmazás teljesítményének optimalizálását és a kiváló felhasználói élmény biztosítását a globális közönség számára. A kód útvonalak, összetevők vagy funkciók alapján történő stratégiai felosztásával, valamint az erőforrások igény szerinti lusta betöltésével jelentősen csökkentheti a kezdeti betöltési időket, javíthatja a reakciókészséget és fokozhatja az alkalmazás általános hatékonyságát. Ne felejtse el követni a bevált gyakorlatokat, figyelembe venni a globális szempontokat, és folyamatosan figyelni az alkalmazás teljesítményét annak biztosítása érdekében, hogy a lehető legjobb élményt nyújtsa a felhasználóknak világszerte. Használja ki ezeket a technikákat, és nézze, hogyan virágzik alkalmazása a globális digitális környezetben.