M
MLOG
React koda sadalīšana: uz maršrutiem balstīta saišķu dalīšana optimizētai veiktspējai | MLOG | MLOG

Internacionalizācija (i18n) un koda sadalīšana

Lietojumprogrammām, kas atbalsta vairākas valodas, koda sadalīšanu var izmantot, lai ielādētu valodai specifiskus resursus pēc pieprasījuma. Tas var ievērojami samazināt lietojumprogrammas sākotnējo ielādes laiku, jo lietotājiem ir jālejupielādē tikai resursi savai izvēlētajai valodai. Piemēram, tā vietā, lai ielādētu visus valodu failus uzreiz, jūs varētu ielādēt attiecīgo valodas failu tikai tad, kad lietotājs pārslēdzas uz citu valodu.

Viena no pieejām ir izmantot dinamiskos importus, lai ielādētu valodu failus, pamatojoties uz lietotāja lokalizāciju. Pēc tam jūs varat izmantot bibliotēku, piemēram, i18next, lai pārvaldītu tulkošanas procesu.

Piemērs:

            
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(`Failed to load language ${lng}:`, error);
  }
};

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

// Later, when the user changes language:
const changeLanguage = (lng) => {
  loadLanguage(lng).then(() => {
    i18next.changeLanguage(lng);
  });
};

Autentifikācija un autorizācija

Koda sadalīšanu var izmantot arī, lai ielādētu dažādas lietojumprogrammas daļas, pamatojoties uz lietotāja autentifikācijas statusu vai lomu. Piemēram, jūs varētu vēlēties slinki ielādēt administratora paneli tikai autentificētiem administratoriem.

To var ieviest, nosacīti renderējot dažādus maršrutus, pamatojoties uz lietotāja autentifikācijas statusu vai lomu. Šo maršrutu slinki ielādētās komponentes tiks ielādētas tikai tad, kad lietotājs atbildīs nepieciešamajiem kritērijiem.

Piemērs:

            
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; // Replace with your authentication logic
  const isAdmin = true; // Replace with your authorization logic

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

Rīki uzraudzībai un optimizācijai

Vairāki rīki var palīdzēt jums uzraudzīt un optimizēt koda sadalīšanas ieviešanu:

Labākās prakses uz maršrutiem balstītai koda sadalīšanai

Biežākās kļūdas, no kurām jāizvairās

Noslēgums

Uz maršrutiem balstīta koda sadalīšana ir spēcīga tehnika jūsu React lietojumprogrammu veiktspējas optimizēšanai. Sadalot lietojumprogrammu mazākos, pārvaldāmos saišķos, jūs varat ievērojami samazināt sākotnējo ielādes laiku, uzlabot veiktspēju un uzlabot lietotāja pieredzi. Izprotot un piemērojot šajā rakstā izklāstītās tehnikas un labākās prakses, jūs varat veidot ātrākas, atsaucīgākas un saistošākas tīmekļa lietojumprogrammas, kas iepriecina jūsu lietotājus neatkarīgi no tā, kur viņi atrodas pasaulē. Atcerieties nepārtraukti uzraudzīt savas lietojumprogrammas veiktspēju un pielāgot savu koda sadalīšanas stratēģiju, ja nepieciešams, lai nodrošinātu optimālus rezultātus. No sākotnējās ielādes līdz dažādu valodu un lietotāju lomu atbalstam, koda sadalīšana piedāvā milzīgu elastību efektīvu un mērogojamu lietojumprogrammu veidošanā globālai auditorijai.