M
MLOG
Reagento kodo skaidymas: Maršrutais pagrįstas paketo padalijimas optimizuotam našumui | MLOG | MLOG

Internacionalizacija (i18n) ir kodo skaidymas

Programoms, kurios palaiko kelias kalbas, kodo skaidymas gali būti naudojamas kalbai būdingiems ištekliams įkelti pagal poreikį. Tai gali žymiai sumažinti pradinį programos įkėlimo laiką, nes naudotojams reikia atsisiųsti tik pasirinktos kalbos išteklius. Pavyzdžiui, vietoj to, kad įkeltumėte visus kalbos failus vienu metu, galite įkelti atitinkamą kalbos failą tik tada, kai naudotojas persijungia į kitą kalbą.

Vienas iš būdų yra naudoti dinaminius importus kalbos failams įkelti pagal naudotojo lokalę. Tada galite naudoti biblioteką, tokią kaip i18next, kad valdytumėte vertimo procesą.

Pavyzdys:

            
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);
  });
};

Autentifikavimas ir autorizavimas

Kodo skaidymas taip pat gali būti naudojamas skirtingoms programos dalims įkelti pagal naudotojo autentifikavimo būseną arba vaidmenį. Pavyzdžiui, galbūt norėsite tingiai įkelti administratoriaus valdymo skydelį tik autentifikuotiems administratoriams.

Tai galite įgyvendinti sąlygiškai atvaizduodami skirtingus maršrutus pagal naudotojo autentifikavimo būseną arba vaidmenį. Tingiai įkeliami šių maršrutų komponentai bus įkeliami tik tada, kai naudotojas atitiks reikiamus kriterijus.

Pavyzdys:

            
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 ? ( ) : ( ) } /> ); }

Įrankiai stebėsenai ir optimizavimui

Keletas įrankių gali padėti stebėti ir optimizuoti kodo skaidymo įgyvendinimą:

Geriausia maršrutais pagrįsto kodo skaidymo praktika

Dažnos klaidos, kurių reikia vengti

Išvada

Maršrutais pagrįstas kodo skaidymas yra galingas būdas optimizuoti jūsų Reagento programų našumą. Padaliję programą į mažesnius, valdomus paketus, galite žymiai sumažinti pradinį įkėlimo laiką, pagerinti našumą ir pagerinti naudotojo patirtį. Suprasdami ir taikydami šiame straipsnyje aprašytus metodus ir geriausią praktiką, galite sukurti greitesnes, jautresnes ir patrauklesnes žiniatinklio programas, kurios džiugina jūsų naudotojus, kad ir kur jie būtų pasaulyje. Atminkite, kad nuolat stebėtumėte savo programos našumą ir pritaikykite kodo skaidymo strategiją, kad užtikrintumėte optimalius rezultatus. Nuo pradinio įkėlimo iki įvairių kalbų ir naudotojų vaidmenų palaikymo, kodo skaidymas siūlo didžiulį lankstumą kuriant efektyvias ir keičiamo dydžio programas pasaulinei auditorijai.