M
MLOG
JavaScript Dinamik Importlar: Kodni bo'lish va Lazy Yuklashni Mukammallashtirish | MLOG | MLOG

Modal komponenti faqat foydalanuvchi "Modalni ochish" tugmasini bosganda yuklanadi.

3. Xususiyatga asoslangan kodni bo'lish

Ushbu yondashuv kodingizni ilovangizdagi aniq xususiyatlar yoki funksiyalar asosida bo'lishga qaratilgan. Bu, ayniqsa, barcha foydalanuvchilar tomonidan har doim ham kerak bo'lmaydigan murakkab xususiyatlarga ega katta ilovalar uchun foydalidir. Misol uchun, elektron tijorat sayti mahsulot sharhlari yoki istaklar ro'yxatiga tegishli kodni faqat foydalanuvchi ushbu xususiyatlar bilan o'zaro aloqada bo'lganda dangasalik bilan yuklashi mumkin.

Misol (hisobot berish xususiyatini dangasalik bilan yuklash):

            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 komponenti, ehtimol, murakkab ma'lumotlarni vizualizatsiya qilish va tahlil qilish mantiqini o'z ichiga olgan holda, faqat administrator "Hisobotlar panelini ko'rsatish" tugmasini bosganda yuklanadi.

4. Shartli kodni bo'lish

Ushbu usul modullarni ma'lum shartlarga, masalan, foydalanuvchi qurilmasi, brauzeri yoki joylashuviga qarab dinamik ravishda import qilishni o'z ichiga oladi. Bu ilovangiz kodini har bir foydalanuvchining maxsus ehtiyojlariga moslashtirishga imkon beradi, unumdorlik va resurslardan foydalanishni yanada optimallashtiradi. Turli xil tasvir formatlarini (masalan, qo'llab-quvvatlanadigan brauzerlar uchun WebP) taqdim etishni yoki polifillarni faqat eski brauzerlar uchun yuklashni ko'rib chiqing.

Misol (eski brauzerlar uchun polifillarni yuklash):

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

Ushbu kod fetch API va Promise brauzer tomonidan qo'llab-quvvatlanadimi yoki yo'qligini tekshiradi. Agar yo'q bo'lsa, u tegishli polifillarni dinamik ravishda import qiladi.

Lazy Yuklash Strategiyalari

Lazy yuklash - bu resurslarni yuklashni ular haqiqatan ham kerak bo'lguncha kechiktiradigan usul. Bu dastlabki sahifani yuklash vaqtini sezilarli darajada yaxshilashi va tarmoqli kengligini kamaytirishi mumkin. Dinamik importlar JavaScript ilovalarida dangasalik bilan yuklashni amalga oshirish uchun kuchli vositadir.

1. Rasmlarni dangasalik bilan yuklash

Rasmlar ko'pincha sahifa hajmining asosiy hissasi hisoblanadi. Rasmlarni dangasalik bilan yuklash, burmadan pastdagi rasmlar (ya'ni ko'rish maydonida darhol ko'rinmaydiganlar) faqat foydalanuvchi sahifani pastga siljitganda yuklanishini ta'minlaydi.

Misol (Intersection Observer API yordamida):

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

Ushbu misolda data-src atributi tasvirning URL manzilini o'z ichiga oladi. Intersection Observer API tasvir ko'rish maydoniga kirganda aniqlash uchun ishlatiladi, shu nuqtada tasvir yuklanadi.

2. Videolarni dangasalik bilan yuklash

Rasmlarga o'xshab, videolar ham sahifani yuklash vaqtiga sezilarli ta'sir ko'rsatishi mumkin. Videolarni dangasalik bilan yuklash, foydalanuvchi ular bilan o'zaro ta'sir qilmaguncha (masalan, o'ynash tugmasini bosmaguncha) ularning yuklanishiga yo'l qo'ymaydi.

Misol (joy egasi yordamida videoni dangasalik bilan yuklash):

            

  Video Placeholder

Video dastlab joy egasi tasviri bilan ifodalanadi. Foydalanuvchi o'ynash tugmasini bosganda, video manbai yuklanadi va video o'ynashni boshlaydi.

3. Iframelarni dangasalik bilan yuklash

Ko'pincha uchinchi tomon manbalaridan kontentni joylashtirish uchun ishlatiladigan iframelar ham sahifa unumdorligiga ta'sir qilishi mumkin. Iframelarni dangasalik bilan yuklash, ular faqat foydalanuvchi ularga yaqin joyga siljitganda yuklanishini ta'minlaydi.

Misol (Intersection Observer API yordamida iframeni dangasalik bilan yuklash):

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

Tasvirni dangasalik bilan yuklash misoliga o'xshab, bu kod iframe ko'rish maydoniga kirganda aniqlash uchun Intersection Observer API-dan foydalanadi va keyin iframe kontentini yuklaydi.

Webpack va Dinamik Importlar

Webpack - bu dinamik importlarni ajoyib tarzda qo'llab-quvvatlaydigan mashhur modul bog'lovchisi. U dinamik import bayonotlarini avtomatik ravishda aniqlaydi va kodingizni talab bo'yicha yuklanishi mumkin bo'lgan alohida qismlarga ajratadi.

Konfiguratsiya:

Webpack-da dinamik importlarni yoqish uchun odatda maxsus konfiguratsiya talab qilinmaydi. Biroq, siz quyidagi xususiyatlardan foydalanib, kodni bo'lishni yanada sozlashni xohlashingiz mumkin:

Misol (Kodni bo'lish uchun Webpack konfiguratsiyasi):

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

Ushbu konfiguratsiya sotuvchi kutubxonalari (node_modules dan kod) uchun alohida qism yaratadi va brauzerni keshlashni yoqish uchun har bir qism uchun noyob xeshdan foydalanadi.

React va Dinamik Importlar

React React.lazy() funksiyasi va Suspense komponenti yordamida komponentlarni dangasalik bilan yuklashni o'rnatilgan tarzda qo'llab-quvvatlaydi. Bu React ilovalarida kodni bo'lishni amalga oshirishni osonlashtiradi.

Misol (React komponentini dangasalik bilan yuklash):

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

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

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

React.lazy() funksiyasi dinamik importni qaytaradigan funksiyani oladi. Suspense komponenti komponent yuklanayotganda zaxira UI-ni ta'minlaydi.

Angular va Dinamik Importlar

Angular o'zining marshrutlash konfiguratsiyasi yordamida modullarni dangasalik bilan yuklashni qo'llab-quvvatlaydi. Siz talab bo'yicha modullarni yuklaydigan yo'nalishlarni belgilashingiz mumkin, bu Angular ilovangizning dastlabki yuklash vaqtini sezilarli darajada yaxshilashi mumkin.

Misol (Angular-da modulni dangasalik bilan yuklash):

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

Ushbu misolda FeatureModule faqat foydalanuvchi /feature yo'nalishiga o'tganda yuklanadi.

Vue.js va Dinamik Importlar

Vue.js dinamik importlardan foydalanib komponentlarni dangasalik bilan yuklashni ham qo'llab-quvvatlaydi. Komponentlarni talab bo'yicha yuklash uchun komponent ta'riflaringiz ichida import() sintaksisidan foydalanishingiz mumkin.

Misol (Vue.js komponentini dangasalik bilan yuklash):

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

Ushbu misol AsyncComponent.vue faylini talab bo'yicha yuklaydigan async-component nomli asenkron komponentni belgilaydi. Shuningdek, yuklash, xato, kechikish va taym-aut komponentlari uchun variantlarni taqdim etadi.

Dinamik Importlar va Lazy Yuklash uchun Eng Yaxshi Amaliyotlar

Dinamik importlar va dangasalik bilan yuklashdan samarali foydalanish uchun quyidagi eng yaxshi amaliyotlarni ko'rib chiqing:

Global Mulohazalar

Global auditoriya uchun dinamik importlar va dangasalik bilan yuklashni amalga oshirishda quyidagilarni hisobga olish juda muhim:

Xulosa

JavaScript dinamik importlari kodni bo'lish va dangasalik bilan yuklashni amalga oshirish uchun kuchli mexanizmni ta'minlaydi, bu sizga veb-ilovangiz unumdorligini optimallashtirishga va global auditoriya uchun ajoyib foydalanuvchi tajribasini taqdim etishga imkon beradi. Yo'nalishlar, komponentlar yoki xususiyatlarga asoslangan holda kodingizni strategik tarzda bo'lish orqali va talab bo'yicha resurslarni dangasalik bilan yuklash orqali siz dastlabki yuklash vaqtini sezilarli darajada kamaytirishingiz, sezgirlikni yaxshilashingiz va ilovaning umumiy samaradorligini oshirishingiz mumkin. Eng yaxshi amaliyotlarga rioya qilishni, global mulohazalarni hisobga olishni va ilovangiz unumdorligini doimiy ravishda kuzatib borishni unutmang, shunda siz butun dunyo bo'ylab foydalanuvchilarga eng yaxshi tajribani taqdim etayotganingizga ishonch hosil qiling. Ushbu usullarni qabul qiling va ilovangiz global raqamli landshaftda gullab-yashnashini tomosha qiling.