M

MLOG

O'zbek

Lazy loading va komponent kodini bo'lish orqali React ilovalaringiz uchun tezroq dastlabki yuklanish vaqtini va yaxshilangan ishlash samaradorligini ta'minlang. Amaliy usullar va eng yaxshi tajribalarni o'rganing.

React Lazy Loading: Komponent Kodini Bo'lish Orqali Ishlashni Optimallashtirish

Bugungi tezkor raqamli dunyoda veb-sayt samaradorligi eng muhim omil hisoblanadi. Foydalanuvchilar bir zumda natija kutishadi va sekin yuklanish vaqtlari hafsalaning pir bo'lishiga, savatlarning tashlab ketilishiga va brend haqida salbiy taassurot qoldirishiga olib kelishi mumkin. React ilovalari uchun samaradorlikni optimallashtirish silliq va jozibador foydalanuvchi tajribasini taqdim etish uchun juda muhimdir. Bunga erishishning kuchli usullaridan biri bu lazy loading (dangasa yuklash) bilan birga komponent kodini bo'lish hisoblanadi.

Lazy Loading va Kodni Bo'lish nima?

Lazy loading - bu resurslarni, masalan, rasmlar, skriptlar va komponentlarni dastlabki sahifa yuklanishida birdaniga emas, balki faqat kerak bo'lganda yuklash usulidir. Bu oldindan yuklab olinishi va tahlil qilinishi kerak bo'lgan ma'lumotlar miqdorini sezilarli darajada kamaytiradi, natijada dastlabki yuklanish vaqti tezlashadi va seziladigan samaradorlik yaxshilanadi.

Kodni bo'lish (code splitting) - bu ilovangiz kodini kichikroq, boshqarilishi osonroq qismlarga (yoki to'plamlarga) bo'lish jarayonidir. Bu brauzerga faqat dastlabki ko'rinish uchun zarur bo'lgan kodni yuklab olish imkonini beradi va boshqa kodlarni yuklashni ular haqiqatda talab qilinmaguncha kechiktiradi. Lazy loading ma'lum komponentlarni faqat ular render qilinishi arafasida yuklash uchun kodni bo'lishdan foydalanadi.

Nima uchun React'da Lazy Loading va Kodni Bo'lishdan foydalanish kerak?

Nima uchun lazy loading va kodni bo'lishni React loyihalaringizga kiritishni o'ylab ko'rishingiz kerakligi haqida:

React'da Lazy Loadingni qanday joriy qilish kerak

React React.lazy va Suspense komponentlari yordamida lazy loading uchun o'rnatilgan yordamni taqdim etadi. Mana bosqichma-bosqich qo'llanma:

1. React.lazy() dan foydalanish

React.lazy() sizga komponentlarni dinamik ravishda import qilish imkonini beradi, bu esa kodingizni samarali ravishda alohida qismlarga bo'ladi. U komponentga hal qilinadigan Promise'ni qaytaradigan import() ni chaqiruvchi funksiyani qabul qiladi.


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

Ushbu misolda, MyComponent faqat render qilinishi arafasida yuklanadi.

2. <Suspense> bilan o'rash

React.lazy() dinamik importlardan foydalanganligi sababli, ular asinxron bo'ladi, siz dangasa yuklangan komponentni <Suspense> komponenti bilan o'rashingiz kerak. <Suspense> komponenti komponent yuklanayotgan vaqtda zaxira UI (masalan, yuklanish belgisi) ko'rsatishga imkon beradi.


import React, { Suspense } from 'react';

function MyPage() {
  return (
    Loading...
}> ); }

Ushbu misolda, MyComponent yuklanayotgan vaqtda Loading... (Yuklanmoqda...) xabari ko'rsatiladi. Komponent yuklangandan so'ng, u zaxira UI o'rnini egallaydi.

3. Amaliy Misol: Katta Rasmlar Galereyasini Dangasa Yuklash

Katta rasmlar galereyasiga ega bo'lgan stsenariyni ko'rib chiqaylik. Barcha rasmlarni bir vaqtning o'zida yuklash ishlash samaradorligiga sezilarli ta'sir qilishi mumkin. Mana React.lazy() va <Suspense> yordamida rasmlarni qanday qilib dangasa yuklash mumkin:


import React, { Suspense } from 'react';

const LazyImage = React.lazy(() => import('./Image'));

function ImageGallery() {
  const images = [
    { id: 1, src: 'image1.jpg', alt: 'Rasm 1' },
    { id: 2, src: 'image2.jpg', alt: 'Rasm 2' },
    { id: 3, src: 'image3.jpg', alt: 'Rasm 3' },
    // ... ko'proq rasmlar
  ];

  return (
    

      {images.map(image => (
        Rasm yuklanmoqda...
}>
          
        
      ))}
    
  );
}

export default ImageGallery;

Va Image.js komponenti:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

Ushbu misolda har bir rasm <Suspense> komponenti bilan o'ralgan, shuning uchun har bir rasm yuklanayotganda yuklanish xabari ko'rsatiladi. Bu rasmlar yuklanayotgan vaqtda butun sahifaning bloklanishini oldini oladi.

Ilg'or Texnikalar va Mulohazalar

1. Xatolik Chegaralari (Error Boundaries)

Lazy loadingdan foydalanganda, yuklash jarayonida yuzaga kelishi mumkin bo'lgan potentsial xatoliklarni bartaraf etish muhimdir. Xatolik chegaralari (Error boundaries) bu xatoliklarni ushlash va zaxira UI ko'rsatish uchun ishlatilishi mumkin. Siz quyidagicha xatolik chegarasi komponentini yaratishingiz mumkin:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Holatni yangilang, shunda keyingi renderda zaxira UI ko'rsatiladi.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Shuningdek, xatoni xatoliklar haqida hisobot berish xizmatiga yozib qo'yishingiz mumkin
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Siz istalgan maxsus zaxira UI'ni render qilishingiz mumkin
      return 
Nimadir xato ketdi.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Keyin <Suspense> komponentini <ErrorBoundary> bilan o'rang:



  Loading...}>

Agar MyComponent ni yuklash paytida xatolik yuzaga kelsa, <ErrorBoundary> uni ushlaydi va zaxira UI'ni ko'rsatadi.

2. Server Tomonida Render Qilish (SSR) va Lazy Loading

Lazy loading ilovangizning dastlabki yuklanish vaqtini yaxshilash uchun server tomonida render qilish (SSR) bilan birgalikda ham ishlatilishi mumkin. Biroq, bu ba'zi qo'shimcha sozlamalarni talab qiladi. Siz serverning dinamik importlarni to'g'ri bajara olishiga va dangasa yuklangan komponentlarning mijoz tomonida to'g'ri "gidratlanishiga" ishonch hosil qilishingiz kerak.

Next.js va Gatsby.js kabi vositalar SSR muhitlarida lazy loading va kodni bo'lish uchun o'rnatilgan yordamni taqdim etadi, bu jarayonni ancha osonlashtiradi.

3. Dangasa Yuklanadigan Komponentlarni Oldindan Yuklash

Ba'zi hollarda, siz dangasa yuklanadigan komponentni u haqiqatda kerak bo'lishidan oldin oldindan yuklashni xohlashingiz mumkin. Bu tez orada render qilinishi mumkin bo'lgan komponentlar, masalan, sahifaning ko'rinmas qismida joylashgan, ammo aylantirilishi ehtimoli yuqori bo'lgan komponentlar uchun foydali bo'lishi mumkin. Siz komponentni import() funksiyasini qo'lda chaqirish orqali oldindan yuklashingiz mumkin:


import('./MyComponent'); // MyComponent'ni oldindan yuklash

Bu komponentni fonda yuklashni boshlaydi, shuning uchun u haqiqatda render qilinganda tezroq mavjud bo'ladi.

4. Webpack "Sehrli Izohlari" bilan Dinamik Importlar

Webpackning "sehrli izohlari" yaratilgan kod qismlarining nomlarini sozlash imkonini beradi. Bu ilovangizning to'plam tuzilishini tuzatish va tahlil qilish uchun foydali bo'lishi mumkin. Masalan:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Bu umumiy nom o'rniga "my-component.js" (yoki shunga o'xshash) nomli kod qismini yaratadi.

5. Umumiy Xatolardan Qochish

Haqiqiy Dunyodan Misollar va Qo'llash Holatlari

Lazy loading React ilovalarining samaradorligini oshirish uchun keng ko'lamli stsenariylarda qo'llanilishi mumkin. Mana ba'zi misollar:

Misol: Xalqaro Elektron Tijorat Veb-sayti

Butun dunyo bo'ylab mahsulot sotadigan elektron tijorat veb-saytini tasavvur qiling. Turli mamlakatlarda turli xil valyutalar, tillar va mahsulot kataloglari bo'lishi mumkin. Har bir mamlakat uchun barcha ma'lumotlarni oldindan yuklash o'rniga, siz saytga tashrif buyurganlarida faqat foydalanuvchining joylashuviga xos ma'lumotlarni yuklash uchun dangasa yuklashdan foydalanishingiz mumkin.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Foydalanuvchi mamlakatini aniqlash funksiyasi

  return (
    Mintaqangiz uchun kontent yuklanmoqda...}>
      
      
    
  );
}

Xulosa

Lazy loading va komponent kodini bo'lish React ilovalarining samaradorligini optimallashtirish uchun kuchli usullardir. Komponentlarni faqat kerak bo'lganda yuklash orqali siz dastlabki yuklanish vaqtini sezilarli darajada qisqartirishingiz, foydalanuvchi tajribasini yaxshilashingiz va SEO'ni kuchaytirishingiz mumkin. React'ning o'rnatilgan React.lazy() va <Suspense> komponentlari loyihalaringizda dangasa yuklashni amalga oshirishni osonlashtiradi. Global auditoriya uchun tezroq, sezgirroq va jozibadorroq veb-ilovalarni yaratish uchun ushbu usullarni qo'llang.

Dangasa yuklashni amalga oshirayotganda har doim foydalanuvchi tajribasini hisobga olishni unutmang. Ma'lumot beruvchi zaxira UI'larni taqdim eting, potentsial xatoliklarni ohista bartaraf eting va kerakli natijalarga erishayotganingizga ishonch hosil qilish uchun ilovangizning ishlashini diqqat bilan tahlil qiling. Turli xil yondashuvlarni sinab ko'rishdan va o'zingizning maxsus ehtiyojlaringiz uchun eng yaxshi yechimni topishdan qo'rqmang.