M
MLOG
ரியாக்ட் கோட் ஸ்ப்ளிட்டிங்: உகந்த செயல்திறனுக்கான ரூட்-அடிப்படையிலான பண்டில் பிரித்தல் | MLOG | MLOG

சர்வதேசமயமாக்கல் (i18n) மற்றும் கோட் ஸ்ப்ளிட்டிங்

பல மொழிகளை ஆதரிக்கும் பயன்பாடுகளுக்கு, மொழி சார்ந்த வளங்களைத் தேவைக்கேற்ப ஏற்றுவதற்கு கோட் ஸ்ப்ளிட்டிங்கைப் பயன்படுத்தலாம். இது பயன்பாட்டின் ஆரம்ப ஏற்றுதல் நேரத்தை கணிசமாகக் குறைக்கும், ஏனெனில் பயனர்கள் அவர்கள் தேர்ந்தெடுத்த மொழிக்குரிய வளங்களை மட்டுமே பதிவிறக்கம் செய்ய வேண்டும். எடுத்துக்காட்டாக, எல்லா மொழி கோப்புகளையும் ஒரே நேரத்தில் ஏற்றுவதற்குப் பதிலாக, பயனர் வேறு மொழிக்கு மாறும்போது மட்டுமே தொடர்புடைய மொழி கோப்பை ஏற்றலாம்.

ஒரு அணுகுமுறை பயனரின் இருப்பிடத்தின் அடிப்படையில் மொழி கோப்புகளை ஏற்றுவதற்கு டைனமிக் இம்போர்ட்ஸைப் பயன்படுத்துவதாகும். பின்னர் நீங்கள் மொழிபெயர்ப்பு செயல்முறையை நிர்வகிக்க i18next போன்ற ஒரு லைப்ரரியைப் பயன்படுத்தலாம்.

எடுத்துக்காட்டு:

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

அங்கீகாரம் மற்றும் அதிகாரமளித்தல்

பயனரின் அங்கீகார நிலை அல்லது பாத்திரத்தின் அடிப்படையில் உங்கள் பயன்பாட்டின் வெவ்வேறு பகுதிகளை ஏற்றுவதற்கும் கோட் ஸ்ப்ளிட்டிங்கைப் பயன்படுத்தலாம். எடுத்துக்காட்டாக, அங்கீகரிக்கப்பட்ட நிர்வாகிகளுக்கு மட்டுமே நிர்வாக டாஷ்போர்டை சோம்பேறித்தனமாக ஏற்ற விரும்பலாம்.

பயனரின் அங்கீகார நிலை அல்லது பாத்திரத்தின் அடிப்படையில் வெவ்வேறு ரூட்களை நிபந்தனையுடன் ரெண்டர் செய்வதன் மூலம் இதைச் செயல்படுத்தலாம். இந்த ரூட்களுக்கான லேசியாக ஏற்றப்பட்ட காம்போனென்ட்கள் பயனர் தேவையான நிபந்தனைகளைப் பூர்த்தி செய்யும் போது மட்டுமே ஏற்றப்படும்.

எடுத்துக்காட்டு:

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

கண்காணிப்பு மற்றும் மேம்படுத்தலுக்கான கருவிகள்

உங்கள் கோட் ஸ்ப்ளிட்டிங் செயலாக்கத்தைக் கண்காணிக்கவும் மேம்படுத்தவும் பல கருவிகள் உதவும்:

ரூட்-அடிப்படையிலான கோட் ஸ்ப்ளிட்டிங்கிற்கான சிறந்த நடைமுறைகள்

தவிர்க்க வேண்டிய பொதுவான தவறுகள்

முடிவுரை

ரூட்-அடிப்படையிலான கோட் ஸ்ப்ளிட்டிங் என்பது உங்கள் ரியாக்ட் பயன்பாடுகளின் செயல்திறனை மேம்படுத்துவதற்கான ஒரு சக்திவாய்ந்த நுட்பமாகும். உங்கள் பயன்பாட்டை சிறிய, நிர்வகிக்கக்கூடிய பண்டில்களாகப் பிரிப்பதன் மூலம், நீங்கள் ஆரம்ப ஏற்றுதல் நேரத்தைக் கணிசமாகக் குறைத்து, செயல்திறனை மேம்படுத்தி, பயனர் அனுபவத்தை மேம்படுத்தலாம். இந்தக் கட்டுரையில் கோடிட்டுக் காட்டப்பட்டுள்ள நுட்பங்கள் மற்றும் சிறந்த நடைமுறைகளைப் புரிந்துகொண்டு பயன்படுத்துவதன் மூலம், உலகில் எங்கிருந்தாலும் உங்கள் பயனர்களை மகிழ்விக்கும் வேகமான, பதிலளிக்கக்கூடிய மற்றும் ஈர்க்கக்கூடிய வலைப் பயன்பாடுகளை நீங்கள் உருவாக்கலாம். உங்கள் பயன்பாட்டின் செயல்திறனைத் தொடர்ந்து கண்காணித்து, உகந்த முடிவுகளை உறுதிப்படுத்தத் தேவைக்கேற்ப உங்கள் கோட் ஸ்ப்ளிட்டிங் உத்தியை மாற்றியமைக்க நினைவில் கொள்ளுங்கள். ஆரம்ப ஏற்றுதல் முதல் பல்வேறு மொழிகள் மற்றும் பயனர் பாத்திரங்களை ஆதரிப்பது வரை, உலகளாவிய பார்வையாளர்களுக்காக திறமையான மற்றும் அளவிடக்கூடிய பயன்பாடுகளை உருவாக்குவதில் கோட் ஸ்ப்ளிட்டிங் மகத்தான நெகிழ்வுத்தன்மையை வழங்குகிறது.