React Loyihani Production-ga Chiqarish Cheklisti: 10 Muhim Qadam

Nega Production Cheklisti Har Bir Dasturchiga Kerak?

Lokal kompyuterda (localhost) dastur ishlab chiqish jarayonida veb-ilova juda tez va muammosiz ishlayotgandek tuyulishi mumkin. Biroq uni real serverga (production) yuklaganingizda sekin internet, turli xil ekran o'lchamlari, kutilmagan JavaScript xatolari va qidiruv tizimlari (SEO) indeksatsiyasi bilan bog'liq jiddiy kamchiliklar yuzaga chiqadi.

Ushbu maqolada React loyihangizni foydalanuvchilarga taqdim etishdan oldin tekshirib chiqishingiz lozim bo'lgan 10 ta eng muhim qadamni cheklist shaklida jamladik.

1. Bundle Hajmini Tekshirish va Code Splitting Qo'llash

React ilovalari odatda bitta katta JavaScript fayliga yig'iladi. Agar ilovangiz hajmi katta bo'lsa, foydalanuvchi birinchi sahifani ko'rishi uchun bir necha megabaytlik kodni yuklab olishiga to'g'ri keladi. Bu esa veb-saytning birinchi yuklanish vaqtini (LCP) keskin pasaytiradi.

Nima qilish kerak?

• Sahifalarni React.lazy() va Suspense orqali faqat kerak bo'lganda yuklanadigan (lazy loading) qiling.
• Vite ishlatayotgan bo'lsangiz rollup-plugin-visualizer, Webpack ishlatayotgan bo'lsangiz webpack-bundle-analyzer orqali katta kutubxonalarni aniqlang.
• Og'ir kutubxonalar o'rniga yengil muqobillarini tanlang (masalan, moment.js o'rniga date-fns yoki dayjs).

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./pages/Dashboard'));

function App() {
  return (
    <Suspense fallback={<div>Yuklanmoqda...</div>}>
      <Dashboard />
    </Suspense>
  );
}

2. Maxfiy Ma'lumotlar va Muhit O'zgaruvchilari (.env) Xavfsizligi

React ilovasi brauzerda ishlaydi, shuning uchun uning ichidagi har qanday kod va o'zgaruvchini foydalanuvchi ko'rishi mumkin. Eng ko'p uchraydigan xato — maxfiy kalitlarni frontend muhitiga qo'shib yuborishdir.

Tezkor cheklist:

• Hech qachon backend maxfiy kalitlarini (masalan, STRIPE_SECRET_KEY, ma'lumotlar bazasi parollari yoki bot tokenlarini) VITE_ yoki REACT_APP_ prefiksi bilan saqlamang.
• Barcha maxfiy kalitlar backend orqali himoyalangan API so'rovlarida ishlatilishi shart.
• .gitignore faylida .env va .env.local mavjudligini qayta tekshiring. Git tarixiga maxfiy fayllar tushib qolmasligiga ishonch hosil qiling.

3. Error Boundary (Xatolik Chegarasi) O'rnatish

React-da komponentlarning birortasida render jarayonida kutilmagan JavaScript xatosi yuz bersa, butun ilova o'chib, foydalanuvchiga bo'sh oq ekran (white screen of death) ko'rinib qoladi. Buni oldini olish uchun kamida asosiy yo'nalishlar (routes) uchun Error Boundary o'rnatilishi shart.

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

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Xatolikni Sentry yoki backend monitoringiga yuborish
    console.error("Kutilmagan xato:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h2>Kechirasiz, nimadir noto'g'ri ketdi. Sahifani yangilang.</h2>;
    }
    return this.props.children;
  }
}

4. Rasmlar va Media Resurslarni Optimallashtirish

Og'ir va siqilmagan rasmlar sayt ochilishini 3-5 baravargacha sekinlashtiradi. Loyihani deploy qilishdan oldin barcha statik rasmlarni ko'zdan kechiring.

• PNG va JPEG formatidagi og'ir rasmlarni zamonaviy WebP yoki AVIF formatlariga o'tkazing.
• Ikonkalar uchun faqat SVG formatidan foydalaning.
• Sahifaning pastki qismidagi rasmlar uchun loading="lazy" atributini qo'shing.
• Har bir rasm uchun aniq width va height o'lchamlarini belgilang, bu CLS (Cumulative Layout Shift) xatosini kamaytiradi.

5. SEO va Ijtimoiy Tarmoqlar Uchun Meta Teglar (Open Graph)

Foydalanuvchilar ilovangiz havolasini Telegram, LinkedIn yoki boshqa tarmoqlarda ulashganida chiroyli sarlavha, rasm va tavsif chiqishi lozim. Shuningdek, qidiruv tizimlari sahifalarni to'g'ri tushunishi kerak.

• react-helmet-async yordamida har bir sahifa uchun dinamik title va meta description belgilang.
• Open Graph (og:title, og:image, og:description) va Twitter Card teglarini qo'shing.
• robots.txt va sitemap.xml fayllari to'g'ri sozlanganligini tekshiring.
• Favicon barcha qurilmalar va brauzerlar uchun to'g'ri o'lchamda borligiga ishonch hosil qiling.

6. Konsoldagi Loglar va Warninglarni Tozalash

Dasturlash paytida yozilgan yuzlab console.log(), console.warn() qatorlari production kodda qolib ketishi xavfsizlik va xotira jihatidan yomon amaliyot hisoblanadi.

Agar Vite ishlatayotgan bo'lsangiz, vite.config.js faylida production build vaqtida konsol yozuvlarini avtomatik o'chirib tashlash sozlamasini kiriting:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  esbuild: {
    drop: ['console', 'debugger'],
  },
});

7. Real Xatoliklarni Monitoring Qilish (Sentry/LogRocket)

Deploy qilingandan keyin foydalanuvchilar qanday xatolarga duch kelayotganini dasturchi o'z vaqtida bilmasa, mijozlarni yo'qotishi mumkin. Shuning uchun loyihaga Sentry yoki shunga o'xshash monitoring tizimini ulash tavsiya etiladi.

• Sentry SDK-ni o'rnating va uni Error Boundary bilan bog'lang.
• Foydalanuvchi brauzeri versiyasi, qurilmasi va xato sodir bo'lgan aniq kod qatori haqidagi ma'lumotlarni qabul qiling.
• Kritik xatolar yuz berganda Telegram guruh yoki email orqali tezkor xabarnoma sozlang.

8. SPA Routing va Nginx / Netlify Fallback Sozlamasi

React Router ishlatilganda keng tarqalgan muammo: asosiy sahifadan (masalan, site.uz) boshqa ichki sahifaga (masalan, site.uz/profile) o'tib, sahifa yangilanganda (F5) 404 Not Found xatosi chiqadi.

Chunki Nginx yoki hosting serveri o'sha yo'ldagi jismoniy faylni qidiradi. Buning oldini olish uchun barcha so'rovlar index.html fayliga yo'naltirilishi lozim.

# Nginx konfiguratsiyasi uchun misol:
location / {
    try_files $uri $uri/ /index.html;
}

9. Keshlashtirish va Xavfsizlik Sarlavhalari (Security Headers)

Static fayllarning brauzerda to'g'ri keshlanganligi saytning qayta ochilishini bir zumda amalga oshiradi.

• CSS va JS fayllar uchun uzoq muddatli kesh (masalan, Cache-Control: max-age=31536000, immutable) bering, chunki yangi build vaqtida ularning hash nomlari o'zgaradi.
• index.html fayli uchun keshni o'chiring yoki qisqa qiling (no-cache), aks holda mijozlar yangi versiyani ko'ra olmasligi mumkin.
• Xavfsizlik uchun CSP (Content Security Policy), X-Frame-Options va X-Content-Type-Options sarlavhalarini Nginx yoki hosting orqali sozlang.

10. Lighthouse va Core Web Vitals Sinovi

Deploy qilishdan oldin yoki darhol keyin brauzeringizning DevTools oynasida Lighthouse auditini ishga tushiring.

• Performance: Kamida 85-90 ball bo'lishiga intiling.
• Accessibility: Tugmalar, rang kontrasti va ekran o'quvchi (screen-reader) parametrlarini tekshiring.
• Best Practices: Xavfsiz ulanishlar va eskirgan API ishlatilmaganiga e'tibor bering.
• SEO: Barcha meta parametrlar va to'g'ri semantik HTML teglar (h1, h2, nav, main) qo'llanilganini tasdiqlang.

Xulosa

Ushbu cheklistni har bir katta yoki kichik yangilanishdan oldin odatga aylantirsangiz, loyihangiz xavfsiz, tez va foydalanuvchilar uchun qulay bo'lishini ta'minlaysiz. Ishonchli production tizimi nafaqat dasturchining vaqtini tejaydi, balki mijozlar va foydalanuvchilarning mahsulotga bo'lgan ishonchini ham mustahkamlaydi.