M
MLOG
React Ishlash Samaradorligini Optimizallashtirish: To‘plam Hajmini Kamaytirishni O‘zlashtirish | MLOG | MLOG

Ushbu misoldagi har bir marshrut o‘zining tegishli komponentini sekin (lazily) yuklaydi, bu esa ilovaning dastlabki yuklanish vaqtini yaxshilaydi.

2. Tree Shaking

Tree shaking — bu ilovangizdan o‘lik kodni (dead code) olib tashlaydigan usul. O‘lik kod — bu ilovangizda hech qachon ishlatilmaydigan, lekin baribir to‘plamga kiritilgan kodga ishora qiladi. Bu ko‘pincha siz butun kutubxonalarni import qilganingizda, lekin ularning funksionalligining faqat kichik bir qismidan foydalanganingizda sodir bo‘ladi.

Webpack va Rollup kabi zamonaviy JavaScript to‘plovchilari (bundlers) avtomatik ravishda tree shakingni amalga oshirishi mumkin. Tree shaking samarali ishlashini ta’minlash uchun CommonJS (require sintaksisi) o‘rniga ES modullaridan (import va export sintaksisi) foydalanish muhimdir. ES modullari to‘plovchiga kodingizni statik ravishda tahlil qilish va qaysi eksportlar haqiqatda ishlatilishini aniqlash imkonini beradi.

Misol:

Aytaylik, siz lodash nomli yordamchi kutubxonadan foydalanmoqdasiz. Butun kutubxonani import qilish o‘rniga:

            import _ from 'lodash';

_.map([1, 2, 3], (n) => n * 2);

Faqat kerakli funksiyalarni import qiling:

            import map from 'lodash/map';

map([1, 2, 3], (n) => n * 2);

Bu faqat map funksiyasining to‘plamingizga kiritilishini ta’minlaydi va uning hajmini sezilarli darajada kamaytiradi.

3. Dinamik Importlar

React.lazy() ga o‘xshab, dinamik importlar (import() sintaksisidan foydalanish) modullarni talab bo‘yicha yuklash imkonini beradi. Bu katta kutubxonalarni yoki faqat ma’lum bir vaziyatlarda kerak bo‘ladigan komponentlarni yuklash uchun foydali bo‘lishi mumkin.

Misol:

            async function handleClick() {
  const module = await import('./MyLargeComponent');
  const MyLargeComponent = module.default;
  // MyLargeComponent'dan foydalanish
}

Ushbu misolda, MyLargeComponent faqat handleClick funksiyasi chaqirilganda, odatda foydalanuvchi harakatiga javoban yuklanadi.

4. Minifikatsiya va Siqish

Minifikatsiya kodingizdan bo‘sh joylar, izohlar va ishlatilmagan o‘zgaruvchilar kabi keraksiz belgilarni olib tashlaydi. Siqish esa naqshlarni topadigan va ularni samaraliroq ifodalaydigan algoritmlarni qo‘llash orqali kodingiz hajmini kamaytiradi.

Webpack, Parcel va Rollup kabi ko‘pchilik zamonaviy tuzish vositalari (build tools) minifikatsiya va siqish uchun o‘rnatilgan qo‘llab-quvvatlashga ega. Masalan, Webpack minifikatsiya uchun Terser'dan foydalanadi va siqish uchun Gzip yoki Brotli'dan foydalanishga sozlanishi mumkin.

Misol (Webpack konfiguratsiyasi):

            const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css)$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
  ],
};

Ushbu konfiguratsiya Terser yordamida minifikatsiyani va Gzip yordamida siqishni yoqadi. threshold opsiyasi faylning siqilishi uchun minimal hajmni (baytlarda) belgilaydi.

5. Rasmlarni Optimizallashtirish

Rasmlar ko‘pincha ilovangiz to‘plami hajmiga sezilarli hissa qo‘shishi mumkin. Rasmlaringizni optimallashtirish ishlash samaradorligini keskin oshirishi mumkin.

Rasmlarni optimallashtirish usullari:

6. Kutubxonalarni Oqilona Tanlash

Ilovangizda ishlatadigan kutubxonalarni diqqat bilan baholang. Ba’zi kutubxonalar, hatto ularning funksionalligining kichik bir qismidan foydalansangiz ham, ancha katta bo‘lishi mumkin. Faqat sizga kerak bo‘lgan xususiyatlarni taqdim etadigan kichikroq, ixtisoslashgan kutubxonalardan foydalanishni o‘ylab ko‘ring.

Misol:

Moment.js kabi katta sana formatlash kutubxonasidan foydalanish o‘rniga, date-fns yoki Day.js kabi kichikroq alternativani ko‘rib chiqing. Ushbu kutubxonalar sezilarli darajada kichikroq va shunga o‘xshash funksionallikni taqdim etadi.

To‘plam Hajmini Taqqoslash:

7. HTTP/2

HTTP/2 HTTP protokolining yangi versiyasi bo‘lib, u HTTP/1.1 ga nisbatan bir qancha ishlash samaradorligini oshiruvchi yaxshilanishlarni taklif etadi, jumladan:

Serveringizda HTTP/2'ni yoqish React ilovangizning ishlash samaradorligini, ayniqsa ko‘plab kichik fayllar bilan ishlaganda, sezilarli darajada oshirishi mumkin. Ko‘pchilik zamonaviy veb-serverlar va CDN'lar HTTP/2'ni qo‘llab-quvvatlaydi.

8. Brauzer Keshidan Foydalanish

Brauzer keshi brauzerlarga statik resurslarni (rasmlar, JavaScript fayllari va CSS fayllari kabi) mahalliy saqlash imkonini beradi. Foydalanuvchi ilovangizga qayta tashrif buyurganida, brauzer ushbu resurslarni qayta yuklab olish o‘rniga keshdan olishi mumkin, bu esa yuklanish vaqtini sezilarli darajada qisqartiradi.

Serveringizni statik resurslaringiz uchun tegishli kesh sarlavhalarini o‘rnatishga sozlang. Cache-Control sarlavhasi eng muhimi hisoblanadi. U sizga brauzer resursni qancha vaqt keshda saqlashi kerakligini belgilash imkonini beradi.

Misol:

            Cache-Control: public, max-age=31536000

Ushbu sarlavha brauzerga resursni bir yil davomida keshda saqlashni aytadi.

9. Server Tomonida Renderlash (SSR)

Server tomonida renderlash (SSR) React komponentlaringizni serverda renderlash va dastlabki HTML'ni mijozga yuborishni o‘z ichiga oladi. Bu dastlabki yuklanish vaqtini va SEO'ni yaxshilashi mumkin, chunki qidiruv tizimlari HTML tarkibini osongina skanerlay oladi.

Next.js va Gatsby kabi freymvorklar React ilovalaringizda SSR'ni amalga oshirishni osonlashtiradi.

SSR'ning afzalliklari:

  • Dastlabki Yuklanish Vaqtining Yaxshilanishi: Brauzer oldindan renderlangan HTML'ni oladi, bu esa kontentni tezroq ko‘rsatish imkonini beradi.
  • Yaxshiroq SEO: Qidiruv tizimlari HTML tarkibini osongina skanerlay oladi, bu esa ilovangizning qidiruv tizimidagi reytingini yaxshilaydi.
  • Yaxshilangan Foydalanuvchi Tajribasi: Foydalanuvchilar kontentni tezroq ko‘rishadi, bu esa yanada jozibador tajribaga olib keladi.

    • 10. Memoizatsiya

    Memoizatsiya — bu qimmat funksiya chaqiruvlari natijalarini keshda saqlash va bir xil kiritishlar qayta sodir bo‘lganda ulardan qayta foydalanish usulidir. React'da siz funksional komponentlarni memoizatsiya qilish uchun React.memo() yuqori tartibli komponentidan foydalanishingiz mumkin. Bu komponentning props'lari o‘zgarmaganida keraksiz qayta renderlashlarning oldini oladi.

    Misol:

                import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // Komponentni render qilish
  return 
    {props.data}
    ;
});

export default MyComponent;

    Ushbu misolda, MyComponent faqat props.data prop'i o‘zgargandagina qayta renderlanadi. Agar komponent qachon qayta renderlanishi ustidan ko‘proq nazorat kerak bo‘lsa, React.memo() ga maxsus taqqoslash funksiyasini ham taqdim etishingiz mumkin.

    Haqiqiy Dunyo Misollari va Xalqaro Jihatlar

    To‘plam hajmini kamaytirish tamoyillari universaldir, lekin ularni qo‘llash loyihangizning o‘ziga xos kontekstiga va maqsadli auditoriyaga qarab farq qilishi mumkin. Mana bir nechta misollar:

    Vositalar va Resurslar

    To‘plam hajmini kamaytirish uchun foydali vositalar va resurslar:

    Xulosa

    To‘plam hajmini kamaytirish — bu detallarga diqqat bilan e’tibor berishni talab qiladigan doimiy jarayondir. Ushbu qo‘llanmada bayon etilgan usullarni qo‘llash orqali siz React ilovangizning ishlash samaradorligini sezilarli darajada oshirishingiz va yaxshiroq foydalanuvchi tajribasini taqdim etishingiz mumkin. Muntazam ravishda to‘plam hajmini tahlil qilishni va optimallashtirish uchun sohalarni aniqlashni unutmang. Kichikroq to‘plamning afzalliklari — tezroq yuklanish vaqtlari, yaxshilangan foydalanuvchi jalb etilishi va umumiy yaxshiroq tajriba — bu sa’y-harakatlarga arziydi.

    Veb-dasturlash amaliyotlari rivojlanishda davom etar ekan, global auditoriya talablariga javob beradigan yuqori samarali React ilovalarini yaratish uchun to‘plam hajmini kamaytirishning eng so‘nggi usullari va vositalaridan xabardor bo‘lish juda muhimdir.