M
MLOG
React Kodni Bo'lish: Unumdorlikni Optimizallashtirish uchun Marshrutga Asoslangan To'plamlarga Bo'lish | MLOG | MLOG

Xalqarolashtirish (i18n) va Kodni Bo'lish

Bir nechta tillarni qo'llab-quvvatlaydigan ilovalar uchun kodni bo'lish tilga xos resurslarni talab bo'yicha yuklash uchun ishlatilishi mumkin. Bu ilovaning dastlabki yuklanish vaqtini sezilarli darajada qisqartirishi mumkin, chunki foydalanuvchilar faqat o'zlari tanlagan til uchun resurslarni yuklab olishlari kerak bo'ladi. Masalan, barcha til fayllarini bir vaqtda yuklash o'rniga, foydalanuvchi boshqa tilga o'tgandagina tegishli til faylini yuklashingiz mumkin.

Yondashuvlardan biri foydalanuvchining lokalizatsiyasiga qarab til fayllarini yuklash uchun dinamik importlardan foydalanishdir. Keyin tarjima jarayonini boshqarish uchun i18next kabi kutubxonadan foydalanishingiz mumkin.

Misol:

            
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';

const loadLanguage = async (lng) => {
  try {
    const resources = await import(`./locales/${lng}/translation.json`);
    i18next.addResourceBundle(lng, 'translation', resources.default);
  } catch (error) {
    console.error(`Tilni yuklashda xatolik ${lng}:`, error);
  }
};

i18next
  .use(initReactI18next)
  .init({
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, 
    },
  })
  .then(() => {
    loadLanguage('en');
  });

// Keyinroq, foydalanuvchi tilni o'zgartirganda:
const changeLanguage = (lng) => {
  loadLanguage(lng).then(() => {
    i18next.changeLanguage(lng);
  });
};

Autentifikatsiya va Avtorizatsiya

Kodni bo'lish, shuningdek, foydalanuvchining autentifikatsiya holati yoki rolidan kelib chiqqan holda ilovangizning turli qismlarini yuklash uchun ham ishlatilishi mumkin. Masalan, siz admin panelini faqat autentifikatsiyadan o'tgan administratorlar uchun kechiktirib yuklashni xohlashingiz mumkin.

Buni foydalanuvchining autentifikatsiya holati yoki roliga qarab turli marshrutlarni shartli ravishda render qilish orqali amalga oshirishingiz mumkin. Ushbu marshrutlar uchun kechiktirib yuklanadigan komponentlar faqat foydalanuvchi kerakli mezonlarga javob bergandagina yuklanadi.

Misol:

            
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

const Home = lazy(() => import('./routes/Home'));
const AdminDashboard = lazy(() => import('./routes/AdminDashboard'));

function App() {
  const isAuthenticated = true; // O'zingizning autentifikatsiya mantig'ingiz bilan almashtiring
  const isAdmin = true; // O'zingizning avtorizatsiya mantig'ingiz bilan almashtiring

  return (
    
      Yuklanmoqda...
}> isAuthenticated && isAdmin ? ( ) : ( ) } /> ); }

Monitoring va Optimizallashtirish uchun Vositalar

Bir nechta vositalar kodni bo'lishni amalga oshirishni kuzatish va optimallashtirishga yordam beradi:

Marshrutga Asoslangan Kodni Bo'lish uchun Eng Yaxshi Amaliyotlar

Qochish Kerak Bo'lgan Umumiy Xatolar

Xulosa

Marshrutga asoslangan kodni bo'lish React ilovalaringizning unumdorligini optimallashtirish uchun kuchli usuldir. Ilovangizni kichikroq, boshqariladigan to'plamlarga bo'lish orqali siz dastlabki yuklanish vaqtini sezilarli darajada qisqartirishingiz, unumdorlikni yaxshilashingiz va foydalanuvchi tajribasini oshirishingiz mumkin. Ushbu maqolada keltirilgan usullar va eng yaxshi amaliyotlarni tushunish va qo'llash orqali siz dunyoning qayerida bo'lishidan qat'i nazar, foydalanuvchilaringizni xursand qiladigan tezroq, sezgirroq va qiziqarliroq veb-ilovalarni yaratishingiz mumkin. Optimal natijalarni ta'minlash uchun ilovangizning unumdorligini doimiy ravishda kuzatib borishni va kerak bo'lganda kodni bo'lish strategiyangizni moslashtirishni unutmang. Dastlabki yuklanishdan tortib, turli tillar va foydalanuvchi rollarini qo'llab-quvvatlashgacha, kodni bo'lish global auditoriya uchun samarali va kengaytiriladigan ilovalarni yaratishda katta moslashuvchanlikni taqdim etadi.