Performance Optimization

performance optimization

Performance optimization is the process of improving the performance of a software application.

Performanceni Optimizatsiya Qilish

Foydalanuvchi uchun sekin ochiladigan ilova — bu yomon tajriba. Ushbu maqolada React ilovalarning performance’ini tahlil qilish, muammolarni aniqlash va ularni real amaliy usullar orqali hal qilish bosqichlarini ko‘rib chiqamiz.

1. Performance’ni Tahlil Qilish

1.1. Chrome DevTools Performance Tab

  1. Performance panelini oching.
  2. “Record” tugmasini bosing.
  3. Ilovada harakatlaning — navigatsiya, tugmalar bosilishi.
  4. Record to‘xtagach, grafik va “Flame Chart”’ni tahlil qiling.

Ma’lumot: “Long Task” va “Recalculate Style” kabi devorlar (bottlenecks) eng ko‘p kutishlarga olib keladi.

1.2. React Profiler

import { Profiler } from 'react'
 
function onRenderCallback(
	id, // profiler id
	phase, // “mount” yoki “update”
	actualDuration // render vaqti (ms)
) {
	console.log({ id, phase, actualDuration })
}
 
;<Profiler id='App' onRender={onRenderCallback}>
	<App />
</Profiler>

Profiler yordamida qaysi komponentlar qanchalik tez render bo‘layotganini ko‘ring.

2. Re-render’larni Kamaytirish

2.1. React.memo

Stateless komponentlarni xotirada saqlaydi va props o‘zgarmasa qayta render qilmaydi.

const Button = React.memo(({ onClick, label }) => {
	console.log('Button render')
	return <button onClick={onClick}>{label}</button>
})

2.2. useCallback

Funksiya obyektlarini props sifatida uzatishda memo bilan birgalikda ishlaydi.

function Parent() {
	const [count, setCount] = useState(0)
	const onClick = useCallback(() => setCount(c => c + 1), [])
	return <Button onClick={onClick} label={`Count: ${count}`} />
}

2.3. useMemo

Qimmat bo‘lgan hisob-kitoblarni xotirada (cache) saqlash uchun.

const sortedList = useMemo(() => {
	return items.sort((a, b) => a.value - b.value)
}, [items])

3. Kode Splitting va Lazy Loading

3.1. React.lazy + Suspense

const HeavyComponent = React.lazy(() => import('./HeavyComponent'))
 
function App() {
	return (
		<Suspense fallback={<div>Yuklanmoqda…</div>}>
			<HeavyComponent />
		</Suspense>
	)
}

3.2. Route-Based Splitting (React Router)

import { BrowserRouter, Routes, Route } from 'react-router-dom'
 
const Home = React.lazy(() => import('./pages/Home'))
const About = React.lazy(() => import('./pages/About'))
 
;<BrowserRouter>
	<Suspense fallback={<Spinner />}>
		<Routes>
			<Route path='/' element={<Home />} />
			<Route path='/about' element={<About />} />
		</Routes>
	</Suspense>
</BrowserRouter>

4. Virtualization (Large List Rendering)

4.1. react-window bilan

import { FixedSizeList as List } from 'react-window'
 
function Item({ index, style }) {
	return <div style={style}>Element #{index}</div>
}
 
;<List height={500} itemCount={10000} itemSize={35} width={'100%'}>
	{Item}
</List>

Faqat ekrandagi elementlar render bo‘ladi, qolganlari “virtual” bo‘lib qoladi.

5. Network Optimallashtirish

  1. Prefetch & Preload:

    <link rel="preload" href="/static/js/main.js" as="script" />
<link rel="prefetch" href="/pages/dashboard.js" />

  2. HTTP/2 yordamida resurslar parallel yuklanadi.

  3. Gzip / Brotli siqilgan fayllarni serverdan jo‘natish.

6. Surat va Assetlarni Optimallashtirish

  1. Responsive Images: srcset va sizes

    <img
	src="hero-400.jpg"
	srcset="hero-400.jpg 400w, hero-800.jpg 800w"
	sizes="(max-width: 600px) 400px, 800px"
	alt="Hero"
/>

  2. Modern formatlar: WebP, AVIF

  3. Lazy loading (loading="lazy")

    <img src="photo.jpg" loading="lazy" alt="..." />

7. Build va Bundle Optimallashtirish

  1. Tree-Shaking — ishlatilmagan kod o‘chiriladi.

  2. Gzip/Brotli bilan hosting.

  3. Bundle Analyzer bilan tahlil:

    npm install --save-dev webpack-bundle-analyzer
npx webpack --profile --json > stats.json
npx webpack-bundle-analyzer stats.json

  4. Vendor Splitting:

    optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: "vendors",
        chunks: "all",
      },
    },
  },
}

8. Profiling va Monitoring

  • Web Vitals: largest-contentful-paint, first-input-delay, cumulative-layout-shift.
  • Sentry yoki LogRocket bilan real vaqt monitoring.
  • Custom Metrics: performance.now() dan foydalanish.
console.log('Component render:', performance.now())

9. Performance Budget Qo‘yish

  1. JS: maksimal bundle 200 KB gzip’dan keyin.
  2. TTFB: < 200 ms.
  3. LCP: < 2.5 s.
  4. CLS: < 0.1.

Budget’larni CI pipeline’ga ham kiritish mumkin.

Xulosa

React ilovalarning performance’ini optimallashtirish — bu:

  • 🔄 Render’larni kamaytirish (memo, useMemo, useCallback)
  • ⚡️ Kode splitting & lazy loading
  • 📚 Virtualization (katta ro‘yxatlar)
  • 🌐 Tarmoqli optimallashtirish (prefetch, gzip)
  • 🖼️ Asset optimallashtirish (responsive, lazy)
  • 🛠️ Build tool konfiguratsiyasi (tree-shaking, splitChunks)
  • 🔍 Profiling & Monitoring (Web Vitals, Sentry)
  • 🎯 Budget belgilash

Har bir bosqichni amaliy loyihada sinab ko‘ring va Performance Tab, Profiler kabi vositalar bilan doimiy nazoratda bo‘ling. Shunda foydalanuvchilaringiz doimo tez, silliq, va xursand bo‘ladi!