M
MLOG
Reacti koodi tükeldamine: marsruudipõhine kogumite jaotamine optimeeritud jõudluse saavutamiseks | MLOG | MLOG

Internatsionaliseerimine (i18n) ja koodi tükeldamine

Mitut keelt toetavate rakenduste puhul saab koodi tükeldamist kasutada keelespetsiifiliste ressursside laadimiseks nõudmisel. See võib oluliselt vähendada rakenduse esialgset laadimisaega, kuna kasutajad peavad alla laadima ainult oma valitud keele ressursid. Näiteks selle asemel, et laadida kõik keelefailid korraga, võiksite laadida asjakohase keelefaili alles siis, kui kasutaja vahetab keelt.

Üks lähenemine on kasutada dünaamilisi importimisi keelefailide laadimiseks kasutaja lokaadi alusel. Seejärel saate tõlkeprotsessi haldamiseks kasutada teeki nagu i18next.

Näide:

            
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(`Keele ${lng} laadimine ebaõnnestus:`, error);
  }
};

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

// Hiljem, kui kasutaja keelt vahetab:
const changeLanguage = (lng) => {
  loadLanguage(lng).then(() => {
    i18next.changeLanguage(lng);
  });
};

Autentimine ja autoriseerimine

Koodi tükeldamist saab kasutada ka rakenduse erinevate osade laadimiseks vastavalt kasutaja autentimisstaatusele või rollile. Näiteks võiksite laadida administraatori armatuurlaua laisalt ainult autenditud administraatoritele.

Seda saate rakendada, renderdades tingimuslikult erinevaid marsruute vastavalt kasutaja autentimisstaatusele või rollile. Nende marsruutide laisalt laaditud komponendid laaditakse ainult siis, kui kasutaja vastab nõutavatele kriteeriumidele.

Näide:

            
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; // Asenda oma autentimisloogikaga
  const isAdmin = true; // Asenda oma autoriseerimisloogikaga

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

Tööriistad jälgimiseks ja optimeerimiseks

Mitmed tööriistad aitavad teil jälgida ja optimeerida oma koodi tükeldamise rakendust:

Marsruudipõhise koodi tükeldamise parimad tavad

Levinud lõksud, mida vältida

Kokkuvõte

Marsruudipõhine koodi tükeldamine on võimas tehnika teie Reacti rakenduste jõudluse optimeerimiseks. Jaotades oma rakenduse väiksemateks, hallatavateks kogumiteks, saate oluliselt vähendada esialgset laadimisaega, parandada jõudlust ja täiustada kasutajakogemust. Mõistes ja rakendades selles artiklis kirjeldatud tehnikaid ja parimaid tavasid, saate luua kiiremaid, reageerimisvõimelisemaid ja kaasahaaravamaid veebirakendusi, mis rõõmustavad teie kasutajaid, olenemata sellest, kus nad maailmas asuvad. Pidage meeles, et jälgige pidevalt oma rakenduse jõudlust ja kohandage oma koodi tükeldamise strateegiat vastavalt vajadusele, et tagada optimaalsed tulemused. Alates esialgsest laadimisest kuni mitmekesiste keelte ja kasutajarollide toetamiseni pakub koodi tükeldamine tohutut paindlikkust tõhusate ja skaleeritavate rakenduste loomisel globaalsele publikule.