React Lazy: Optimal Ishlash Uchun Komponentlarni Kechiktirib Yuklashni O'zlashtirish

Hozirgi veb-dasturlash sohasida ishlash samaradorligi juda muhim. Foydalanuvchilar chaqmoqdek tez yuklanish vaqtlari va uzluksiz ko'rish tajribasini kutishadi. Foydalanuvchi interfeyslarini yaratish uchun mashhur JavaScript kutubxonasi bo'lgan React ishlash samaradorligini optimallashtirish uchun bir nechta vositalarni taqdim etadi. Ulardan eng samaralilaridan biri komponentlarni kechiktirib yuklashni (lazy loading) ta'minlaydigan React.lazy funksiyasidir. Ushbu blog postida React.lazy batafsil ko'rib chiqiladi, uning afzalliklari, qo'llanilishi va eng yaxshi amaliyotlari yoritiladi.

Komponentlarni Kechiktirib Yuklash (Lazy Loading) Nima?

Komponentlarni kechiktirib yuklash, shuningdek, kodni bo'lish (code splitting) deb ham ataladi, bu ilovangizning ma'lum qismlarini ular haqiqatda kerak bo'lgunga qadar yuklashni kechiktiradigan usuldir. Barcha komponentlarni oldindan yuklash o'rniga, faqat dastlab talab qilinadigan komponentlar yuklanadi, qolganlari esa foydalanuvchi ular bilan o'zaro aloqada bo'lganda asinxron tarzda olinadi. Bu dastlabki yuklanish vaqtini sezilarli darajada qisqartiradi va foydalanuvchi tajribasini yaxshilaydi.

Ko'plab mahsulot sahifalari, toifalari va interaktiv elementlarga ega bo'lgan yirik elektron tijorat veb-saytini tasavvur qiling. Ushbu komponentlarning barchasini bir vaqtning o'zida yuklash dastlabki yuklanish vaqtini sezilarli darajada oshirib, foydalanuvchilarni hafsalasini pir qilishi va saytdan tez chiqib ketish ko'rsatkichlarini oshirishi mumkin. Komponentlarni kechiktirib yuklash yordamida veb-sayt dastlab faqat bosh sahifa uchun zarur bo'lgan asosiy komponentlarni yuklashi, so'ngra mahsulot sahifalari yoki toifa filtrlari kabi boshqa komponentlarni talabga binoan yuklashi mumkin.

React.lazy ning Afzalliklari

React.lazy dan foydalanish bir qancha muhim afzalliklarni taqdim etadi:

• Dastlabki Yuklanish Vaqtini Yaxshilash: Muhim bo'lmagan komponentlarni yuklashni kechiktirish orqali React.lazy dastlabki to'plam (bundle) hajmini sezilarli darajada kamaytiradi, bu esa tezroq yuklanish vaqtlariga va yaxshiroq foydalanuvchi tajribasiga olib keladi.
• To'plam Hajmini Kamaytirish: Kodni bo'lish ilovangizni kichikroq qismlarga (chunks) ajratadi, bu esa umumiy to'plam hajmini kamaytiradi va kesh samaradorligini oshiradi.
• Foydalanuvchi Tajribasini Oshirish: Tezroq yuklanish vaqtlari silliqroq va sezgirroq foydalanuvchi tajribasini anglatadi, bu esa foydalanuvchilarning jalb qilinishi va mamnuniyatini oshiradi.
• Resurslardan Optimal Foydalanish: Kechiktirib yuklash resurslarning faqat haqiqatda kerak bo'lganda yuklanishini ta'minlaydi, bu esa keraksiz tarmoq trafigi sarfini kamaytiradi va server ishlashini yaxshilaydi.

React.lazy va Suspense bilan Tanishtiruv

React.lazy — bu React komponentlarini kechiktirib yuklashni osonlashtiradigan funksiya. U dinamik import()ni chaqirishi kerak bo'lgan funksiyani qabul qiladi. Bu import() chaqiruvi React komponentini o'z ichiga olgan default eksportli modul bilan yakunlanadigan Promise qaytaradi.

Biroq, komponentlarni kechiktirib yuklash yangi muammoni keltirib chiqaradi: komponent yuklanayotganda nimani ko'rsatish kerak? Aynan shu yerda React.Suspense yordamga keladi. Suspense — bu ma'lum bir shart bajarilgunga qadar (masalan, kechiktirib yuklanayotgan komponent to'liq yuklangunga qadar) komponentlar daraxtingizning bir qismini render qilishni "to'xtatib turish" imkonini beruvchi React komponentidir. Komponent yuklanayotganda ko'rsatilishi uchun yuklanish belgisi (spinner) yoki o'rin to'ldiruvchi (placeholder) kabi zaxira interfeysni taqdim etishingiz mumkin.

React.lazyni Qanday Qo'llash Mumkin

Quyida React.lazyni qo'llash bo'yicha qadamma-qadam qo'llanma keltirilgan:

1. React.lazy va React.Suspenseni import qilish:

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

2. Kechiktirib yuklanadigan komponent yaratish uchun React.lazydan foydalanish:

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

   ./MyComponentni komponent faylingizga yo'l bilan almashtiring. `import()` funksiyasi komponent bilan yakunlanadigan Promise qaytaradi.

3. Kechiktirib yuklangan komponentni React.Suspense bilan o'rash:

               function MyPage() {
     return (
       <Suspense fallback={<div>Yuklanmoqda...</div>}>
         <MyComponent />
       </Suspense>
     );
   }
   
               
   
                 
                   Copy
                 
               
             

   Suspensening fallback prop'i komponent yuklanayotganda ko'rsatiladigan interfeysni belgilaydi. Bu har qanday yaroqli React elementi bo'lishi mumkin.

4. Komponentni render qilish:

               ReactDOM.render(<MyPage />, document.getElementById('root'));
               
   
                 
                   Copy
                 
               
             

Misol: `Profile` Komponentini Kechiktirib Yuklash

Keling, Profile komponentini kechiktirib yuklashni xohlagan misolni ko'rib chiqaylik:

1. Profile komponentini yaratish (Profile.js):

               // Profile.js
   import React from 'react';
   
   function Profile() {
     return (
       <div>
         <h2>Foydalanuvchi Profili</h2>
         <p>Ism: John Doe</p>
         <p>Joylashuv: Nyu-York</p>
       </div>
     );
   }
   
   export default Profile;
               
   
                 
                   Copy
                 
               
             

2. Asosiy komponentingizda Profile komponentini kechiktirib yuklash:

               // App.js
   import React, { lazy, Suspense } from 'react';
   
   const Profile = lazy(() => import('./Profile'));
   
   function App() {
     return (
       <div>
         <h1>Mening Ilovam</h1>
         <Suspense fallback={<div>Profil yuklanmoqda...</div>}>
           <Profile />
         </Suspense>
       </div>
     );
   }
   
   export default App;
               
   
                 
                   Copy
                 
               
             

Ushbu misolda Profile komponenti faqat Suspense chegarasi ichida render qilinganda yuklanadi. Komponent yuklanayotganda "Profil yuklanmoqda..." xabari ko'rsatiladi.

Ilg'or Foydalanish va E'tiborga Olinadigan Jihatlar

Xatoliklarga Ishlov Berish

React.lazydan foydalanganda, yuklash jarayonida yuzaga kelishi mumkin bo'lgan potentsial xatoliklarga ishlov berish muhim. Suspense komponenti, shuningdek, ErrorBoundary (Xatolik Chegarasi) yordamida xatoliklarga ishlov berishni qo'llab-quvvatlaydi. Siz maxsus Error Boundary komponentini yaratib, Suspense komponentini u bilan o'rashingiz mumkin.

            // ErrorBoundary.js
import React from 'react';

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

  static getDerivedStateFromError(error) {
    // Keyingi renderda zaxira interfeys ko'rsatilishi uchun holatni yangilash.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Xatolikni xatolar haqida hisobot beruvchi xizmatga yozib qo'yishingiz ham mumkin
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Istalgan maxsus zaxira interfeysni render qilishingiz mumkin
      return <h1>Nimadir xato ketdi.</h1>;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;
            

              
                Copy
              
            
          

            // App.js
import React, { lazy, Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

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

function App() {
  return (
    <div>
      <h1>Mening Ilovam</h1>
      <ErrorBoundary>
        <Suspense fallback={<div>Profil yuklanmoqda...</div>}>
          <Profile />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

export default App;
            

              
                Copy
              
            
          

Server Tomonida Renderlash (SSR)

React.lazy mijoz tomonida renderlash uchun mo'ljallangan. Agar siz Server Tomonida Renderlash (SSR) dan foydalanayotgan bo'lsangiz, serverda kechiktirib yuklashni boshqarish uchun loadable-components kabi kutubxonadan foydalanishingiz kerak bo'ladi. Ushbu kutubxona server tomonida kodni bo'lishni qo'llab-quvvatlaydi va dastlabki server renderi paytida kerakli komponentlarni oldindan yuklashga imkon beradi.

Dinamik Importlar va Webpack

React.lazy zamonaviy JavaScript to'plovchilari (bundler) bo'lgan Webpack, Parcel va Rollup tomonidan qo'llab-quvvatlanadigan dinamik importlarga tayanadi. Bu to'plovchilar kodingizni avtomatik ravishda alohida qismlarga (chunks) ajratadi, bu esa komponentlarni talabga binoan yuklash imkonini beradi.

Webpack konfiguratsiyangiz dinamik importlarni boshqarish uchun to'g'ri sozlanganligiga ishonch hosil qiling. Odatda, yaratilgan qismlar qanday nomlanishini ko'rsatish uchun `output.chunkFilename`ni sozlash kerak bo'ladi.

Kechiktirib Yuklash Uchun To'g'ri Komponentlarni Tanlash

Hamma komponentlar ham kechiktirib yuklash uchun mos emas. Dastlabki render uchun muhim bo'lgan yoki tez-tez ishlatiladigan komponentlar keraksiz yuklanish kechikishlarini oldini olish uchun darhol yuklanishi kerak. Kechiktirib yuklash uchun yaxshi nomzodlarga quyidagilar kiradi:

• Faqat ma'lum shartlar ostida render qilinadigan komponentlar: Masalan, faqat tugma bosilganda ko'rsatiladigan modal oyna.
• Ekranning ko'rinmaydigan qismida joylashgan komponentlar: Dastlabki ko'rish maydonida ko'rinmaydigan komponentlarni dastlabki yuklanish vaqtini yaxshilash uchun kechiktirib yuklash mumkin.
• Murakkab mantiqqa ega yirik komponentlar: Ushbu komponentlarni kechiktirib yuklash dastlabki to'plam hajmini sezilarli darajada kamaytirishi mumkin.

React.lazy uchun Eng Yaxshi Amaliyotlar

React.lazydan foydalanganda amal qilish kerak bo'lgan ba'zi eng yaxshi amaliyotlar:

• Mazmunli zaxira interfeysdan foydalaning: Zaxira interfeys foydalanuvchiga komponent yuklanayotganligi haqida aniq ma'lumot berishi kerak. Umumiy yuklanish belgilaridan foydalanishdan saqlaning; o'rniga, kontekstga oid ma'lumotlarni taqdim eting. Masalan, agar siz rasmni kechiktirib yuklayotgan bo'lsangiz, yuklanish indikatori bilan o'rin to'ldiruvchi rasmni ko'rsating.
• To'plam hajmini optimallashtiring: Kechiktirib yuklash bilan ham, "tree shaking" (keraksiz kodni olib tashlash), kodni minimallashtirish va rasmlarni optimallashtirish kabi usullardan foydalanib to'plam hajmini optimallashtirish muhim.
• Ishlash samaradorligini kuzatib boring: Ilovangizning ishlashini kuzatish va kechiktirib yuklashni yanada optimallashtirish mumkin bo'lgan joylarni aniqlash uchun brauzerning dasturchi vositalaridan foydalaning.
• Sinovdan puxta o'tkazing: Kechiktirib yuklash to'g'ri ishlayotganiga va kutilmagan xatoliklar yo'qligiga ishonch hosil qilish uchun ilovangizni sinchkovlik bilan sinovdan o'tkazing.
• Foydalanuvchi tajribasini hisobga oling: Kechiktirib yuklash dastlabki yuklanish vaqtini yaxshilasa-da, seziladigan ishlash samaradorligiga e'tibor bering. Oldindan yuklash (preloading) va progressiv yuklash (progressive loading) kabi usullar bilan yuklanish tajribasini optimallashtiring.

Haqiqiy Hayotdagi Misollar

React.lazy turli xil ilovalarda ishlatilishi mumkin. Quyida haqiqiy hayotdagi ba'zi misollar keltirilgan:

• Elektron tijorat veb-saytlari: Dastlabki yuklanish vaqtini yaxshilash va xarid qilish tajribasini oshirish uchun mahsulot rasmlari, tavsiflari va sharhlarini kechiktirib yuklash.
• Bir sahifali ilovalar (SPAs): Dastlabki to'plam hajmini kamaytirish va navigatsiya samaradorligini oshirish uchun ilovaning turli marshrutlari yoki bo'limlarini kechiktirib yuklash.
• Kontentga boy veb-saytlar: Dastlabki yuklanish vaqtini yaxshilash va tarmoq trafigi sarfini kamaytirish uchun rasmlar, videolar va boshqa media kontentni kechiktirib yuklash.
• Boshqaruv paneli ilovalari: Dastlabki yuklanish vaqtini yaxshilash va foydalanuvchi tajribasini oshirish uchun murakkab diagrammalar, grafiklar va ma'lumotlar jadvallarini kechiktirib yuklash.
• Xalqarolashtirilgan Ilovalar: Dastlabki to'plam hajmini kamaytirish va turli mintaqalardagi foydalanuvchilar uchun ishlash samaradorligini oshirish uchun joylashuvga xos resurslar va komponentlarni kechiktirib yuklash. Masalan, til paketlarini faqat foydalanuvchi ma'lum bir tilni tanlaganda yuklash.

React.lazyga Alternativalar

React.lazy kuchli vosita bo'lsa-da, kodni bo'lish va kechiktirib yuklash uchun boshqa alternativlar ham mavjud:

• Loadable Components: React'da kodni bo'lish uchun yuqori tartibli komponent bo'lib, server tomonida renderlashni va yanada ilg'or xususiyatlarni qo'llab-quvvatlaydi.
• React Loadable: Loadable Components'ga o'xshash funksionallikni taqdim etadigan yana bir kutubxona bo'lib, yuklash jarayonini ko'proq nazorat qilish imkonini beradi. Endi faol qo'llab-quvvatlanmasa-da, uni Loadable Components'ning o'tmishdoshi sifatida eslatib o'tishga arziydi.
• @loadable/component: React Loadable'ning davomchisi. U React'da komponent darajasida kodni bo'lish uchun oddiy, ammo kuchli API taqdim etishni maqsad qilgan.

Xulosa

React.lazy — React ilovalaringizning ishlash samaradorligini optimallashtirish uchun kuchli vositadir. Komponentlarni kechiktirib yuklash orqali siz dastlabki yuklanish vaqtini sezilarli darajada qisqartirishingiz, foydalanuvchi tajribasini yaxshilashingiz va resurslardan foydalanishni optimallashtirishingiz mumkin. Ushbu blog postida keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz React.lazyni samarali qo'llashingiz va uzluksiz foydalanuvchi tajribasini ta'minlaydigan yuqori unumdorlikdagi React ilovalarini yaratishingiz mumkin.

Komponentlarni kechiktirib yuklashni o'zlashtiring va React loyihalaringiz uchun yangi ishlash darajasini oching. Foydalanuvchilaringiz buning uchun sizga minnatdorchilik bildirishadi!