M
MLOG
JavaScript dinaminiai importai: tobulinant kodo skaidymą ir tingų įkėlimą | MLOG | MLOG

Modal komponentas yra įkeliamas tik tada, kai vartotojas spusteli mygtuką "Open Modal".

3. Funkcijų pagrindu pagrįstas kodo skaidymas

Šis metodas orientuotas į kodo skaidymą pagal atskiras funkcijas ar funkcionalumus jūsų programoje. Tai ypač naudinga didelėms programoms su sudėtingomis funkcijomis, kurių ne visada reikia visiems vartotojams. Pavyzdžiui, el. komercijos svetainė gali tingiai įkelti kodą, susijusį su produktų apžvalgomis ar pageidavimų sąrašais, tik tada, kai vartotojas sąveikauja su tomis funkcijomis.

Pavyzdys (tingus ataskaitų funkcijos įkėlimas):

            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;

ReportingDashboard komponentas, greičiausiai turintis sudėtingas duomenų vizualizacijas ir analizės logiką, yra įkeliamas tik tada, kai administratorius spusteli mygtuką "Show Reporting Dashboard".

4. Sąlyginis kodo skaidymas

Ši technika apima dinaminių modulių importavimą atsižvelgiant į tam tikras sąlygas, tokias kaip vartotojo įrenginys, naršyklė ar vieta. Tai leidžia jums pritaikyti savo programos kodą prie specifinių kiekvieno vartotojo poreikių, toliau optimizuojant našumą ir išteklių panaudojimą. Apsvarstykite galimybę pateikti skirtingus vaizdų formatus (pvz., WebP palaikomoms naršyklėms) arba įkelti polifilus tik senesnėms naršyklėms.

Pavyzdys (polifilų įkėlimas senesnėms naršyklėms):

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

Šis kodas patikrina, ar naršyklė palaiko fetch API ir Promise. Jei ne, jis dinamiškai importuoja atitinkamus polifilus.

Tingaus įkėlimo strategijos

Tingus įkėlimas yra technika, kuri atideda išteklių įkėlimą, kol jie iš tikrųjų nėra reikalingi. Tai gali žymiai pagerinti pradinį puslapio įkėlimo laiką ir sumažinti pralaidumo suvartojimą. Dinaminiai importai yra galingas įrankis tingaus įkėlimo įgyvendinimui JavaScript programose.

1. Tingus vaizdų įkėlimas

Vaizdai dažnai yra pagrindinis puslapio dydžio veiksnys. Tingus vaizdų įkėlimas užtikrina, kad vaizdai, esantys žemiau ekrano (t. y., tie, kurie nėra iš karto matomi rodinyje), būtų įkeliami tik tada, kai vartotojas slenka žemyn puslapiu.

Pavyzdys (naudojant 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);
});

Šiame pavyzdyje, data-src atributas saugo vaizdo URL. Intersection Observer API naudojamas aptikti, kada vaizdas patenka į rodinį, tada vaizdas yra įkeliamas.

2. Tingus vaizdo įrašų įkėlimas

Panašiai kaip ir vaizdai, vaizdo įrašai taip pat gali žymiai paveikti puslapio įkėlimo laiką. Tingus vaizdo įrašų įkėlimas neleidžia jiems būti įkeltiems, kol vartotojas su jais nesąveikauja (pvz., spusteli paleidimo mygtuką).

Pavyzdys (tingus vaizdo įrašo įkėlimas naudojant vietos rezervavimo ženklą):

            

  Video Placeholder

Vaizdo įrašas iš pradžių yra pateikiamas vietos rezervavimo vaizdu. Kai vartotojas spusteli paleidimo mygtuką, vaizdo įrašo šaltinis yra įkeliamas ir vaizdo įrašas pradeda groti.

3. Tingus Iframes įkėlimas

Iframes, dažnai naudojami norint įterpti turinį iš trečiųjų šalių šaltinių, taip pat gali paveikti puslapio našumą. Tingus iframes įkėlimas užtikrina, kad jie būtų įkeliami tik tada, kai vartotojas prislenka prie jų.

Pavyzdys (tingus iframe įkėlimas naudojant 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);
});

Panašiai kaip ir vaizdo tingaus įkėlimo pavyzdyje, šis kodas naudoja Intersection Observer API, kad aptiktų, kada iframe patenka į rodinį, ir tada įkelia iframe turinį.

Webpack ir dinaminiai importai

Webpack yra populiarus modulių rinkėjas, kuris suteikia puikų dinamiškų importų palaikymą. Jis automatiškai aptinka dinaminius importo sakinius ir suskaido jūsų kodą į atskiras dalis, kurios vėliau gali būti įkeltos pagal poreikį.

Konfigūracija:

Paprastai nereikia jokios specialios konfigūracijos, kad būtų įjungti dinaminiai importai Webpack. Tačiau galbūt norėsite toliau konfigūruoti kodo skaidymą naudodami tokias funkcijas kaip:

Pavyzdys (Webpack konfigūracija kodo skaidymui):

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

Ši konfigūracija sukuria atskirą dalį tiekėjų bibliotekoms (kodas iš node_modules) ir naudoja unikalų kiekvienos dalies maišos kodą, kad įgalintų naršyklės talpyklą.

React ir dinaminiai importai

React teikia integruotą palaikymą tingiems komponentų įkėlimams naudojant React.lazy() funkciją ir Suspense komponentą. Tai leidžia lengvai įgyvendinti kodo skaidymą React programose.

Pavyzdys (tingus React komponento įkėlimas):

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

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

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

React.lazy() funkcija priima funkciją, kuri grąžina dinamišką importą. Suspense komponentas suteikia atsarginę vartotojo sąsają, kol komponentas įkeliamas.

Angular ir dinaminiai importai

Angular palaiko tingų modulių įkėlimą naudojant savo maršrutų konfigūraciją. Galite apibrėžti maršrutus, kurie įkelia modulius pagal poreikį, o tai gali žymiai pagerinti pradinį jūsų Angular programos įkėlimo laiką.

Pavyzdys (tingus modulio įkėlimas 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 { }

Šiame pavyzdyje, FeatureModule yra įkeliamas tik tada, kai vartotojas pereina į /feature maršrutą.

Vue.js ir dinaminiai importai

Vue.js taip pat teikia palaikymą tingiam komponentų įkėlimui naudojant dinaminius importus. Galite naudoti import() sintaksę savo komponentų apibrėžimuose, kad įkeltumėte komponentus pagal poreikį.

Pavyzdys (tingus Vue.js komponento įkėlimas):

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

Šis pavyzdys apibrėžia asinchroninį komponentą, pavadintą async-component, kuris įkelia AsyncComponent.vue failą pagal poreikį. Jis taip pat pateikia parinktis įkėlimo, klaidų, atidėjimo ir laiko limito komponentams.

Geriausios dinaminų importų ir tingaus įkėlimo praktikos

Norėdami efektyviai išnaudoti dinaminius importus ir tingų įkėlimą, apsvarstykite šias geriausias praktikas:

Globalūs aspektai

Įgyvendinant dinaminius importus ir tingų įkėlimą globaliai auditorijai, labai svarbu atsižvelgti į šiuos dalykus:

Išvada

JavaScript dinaminiai importai suteikia galingą mechanizmą įgyvendinti kodo skaidymą ir tingų įkėlimą, leidžiantį optimizuoti savo interneto programos našumą ir suteikti puikią vartotojo patirtį globaliai auditorijai. Strategiškai skaidydami savo kodą pagal maršrutus, komponentus ar funkcijas ir tingiai įkeldami išteklius pagal poreikį, galite žymiai sumažinti pradinius įkėlimo laikus, pagerinti reagavimą ir padidinti bendrą programos efektyvumą. Atminkite, kad reikia laikytis geriausios praktikos, atsižvelgti į globalius aspektus ir nuolat stebėti savo programos našumą, kad užtikrintumėte, jog teikiate geriausią įmanomą patirtį vartotojams visame pasaulyje. Pasinaudokite šiomis technikomis ir stebėkite, kaip jūsų programa klesti globaliame skaitmeniniame kraštovaizdyje.