How to optimize i18next performance?

Lazy Loading

Load Namespaces on Demand

javascript
// load only necessary namespaces on initialization
i18next.init({
  ns: ['translation', 'common'],
  defaultNS: 'translation'
});

// load other namespaces when needed
i18next.loadNamespaces(['admin', 'settings'], (err, t) => {
  if (!err) {
    console.log('Namespaces loaded');
  }
});

Load Languages on Demand

javascript
// load only default language on initialization
i18next.init({
  lng: 'en',
  preload: ['en'] // only preload English
});

// load when user switches language
i18next.loadLanguages(['zh', 'fr'], () => {
  console.log('Language resources loaded');
});

Suspense Mode in React

javascript
import { useTranslation } from 'react-i18next';
import { Suspense } from 'react';

function LazyComponent() {
  const { t } = useTranslation('lazyNamespace');
  return <p>{t('content')}</p>;
}

function App() {
  return (
    <Suspense fallback={<div>Loading translations...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

Caching Strategies

Local Storage Cache

javascript
import LocalStorageBackend from 'i18next-localstorage-backend';
import HttpBackend from 'i18next-http-backend';

i18next
  .use(HttpBackend)
  .use(LocalStorageBackend)
  .init({
    backend: {
      backends: [
        LocalStorageBackend,
        HttpBackend
      ],
      backendOptions: [
        {
          expirationTime: 7 * 24 * 60 * 60 * 1000, // 7 days expiration
          defaultVersion: 'v1.0.0',
          store: window.localStorage
        },
        {
          loadPath: '/locales/{{lng}}/{{ns}}.json'
        }
      ]
    }
  });

Memory Cache

javascript
const translationCache = new Map();

function getCachedTranslation(key, options) {
  const cacheKey = `${key}_${JSON.stringify(options)}`;
  
  if (translationCache.has(cacheKey)) {
    return translationCache.get(cacheKey);
  }
  
  const translation = i18next.t(key, options);
  translationCache.set(cacheKey, translation);
  
  return translation;
}

Cache Invalidation Strategy

javascript
backend: {
  loadPath: '/locales/{{lng}}/{{ns}}.json?v={{version}}',
  queryStringParams: {
    version: process.env.TRANSLATION_VERSION || '1.0.0'
  }
}

Resource Optimization

Compress Translation Resources

javascript
// use gzip compression
// server configuration example (Express)
const express = require('express');
const compression = require('compression');
const app = express();

app.use(compression());
app.use('/locales', express.static('locales'));

Split Translation Files by Function

javascript
// file structure
// locales/
//   ├── en/
//   │   ├── common.json
//   │   ├── admin.json
//   │   ├── user.json
//   │   └── settings.json
//   └── zh/
//       ├── common.json
//       ├── admin.json
//       ├── user.json
//       └── settings.json

// configuration
i18next.init({
  ns: ['common', 'admin', 'user', 'settings'],
  defaultNS: 'common'
});

Remove Unused Translations

javascript
// analyze translation keys used in code at build time
const usedKeys = analyzeTranslationKeysInCode();
const allTranslations = loadAllTranslations();

const optimizedTranslations = filterTranslations(allTranslations, usedKeys);
saveOptimizedTranslations(optimizedTranslations);

Request Optimization

Batch Loading

javascript
// load multiple namespaces at once
Promise.all([
  i18next.loadNamespaces(['admin', 'settings', 'reports']),
  i18next.loadLanguages(['en', 'zh'])
]).then(() => {
  console.log('All translation resources loaded');
});

Preload Critical Resources

javascript
i18next.init({
  preload: ['en', 'zh'], // languages to preload
  ns: ['translation', 'common'], // namespaces to preload
  partialBundledLanguages: true // allow partial loading
});

Use CDN

javascript
backend: {
  loadPath: 'https://cdn.example.com/locales/{{lng}}/{{ns}}.json',
  crossDomain: true
}

Runtime Optimization

Avoid Frequent Translation

javascript
// bad practice
function renderList(items) {
  return items.map(item => (
    <div key={item.id}>
      <h3>{t('item.title', { name: item.name })}</h3>
      <p>{t('item.description', { desc: item.description })}</p>
    </div>
  ));
}

// good practice - cache translations
function renderList(items) {
  const titleTemplate = t('item.title');
  const descTemplate = t('item.description');
  
  return items.map(item => (
    <div key={item.id}>
      <h3>{titleTemplate.replace('{{name}}', item.name)}</h3>
      <p>{descTemplate.replace('{{desc}}', item.description)}</p>
    </div>
  ));
}

Use React.memo Optimization

javascript
import { memo } from 'react';
import { useTranslation } from 'react-i18next';

const TranslatedComponent = memo(({ text }) => {
  const { t } = useTranslation();
  return <span>{t(text)}</span>;
});

Virtual Scrolling for Long Lists

javascript
import { FixedSizeList } from 'react-window';

function TranslatedList({ items }) {
  const { t } = useTranslation();
  
  const Row = ({ index, style }) => (
    <div style={style}>
      {t(items[index].key)}
    </div>
  );
  
  return (
    <FixedSizeList
      height={400}
      itemCount={items.length}
      itemSize={35}
    >
      {Row}
    </FixedSizeList>
  );
}

Monitoring and Analysis

Performance Monitoring

javascript
i18next.on('loaded', (loaded) => {
  console.log('Translation resources loaded:', loaded);
  // send performance metrics to monitoring system
  trackPerformance('i18n_loaded', {
    namespaces: Object.keys(loaded),
    timestamp: Date.now()
  });
});

Error Monitoring

javascript
i18next.on('failedLoading', (lng, ns, msg) => {
  console.error('Translation resources failed to load:', { lng, ns, msg });
  // send errors to monitoring system
  trackError('i18n_load_failed', { lng, ns, msg });
});

Best Practices Summary

1. Lazy Loading: Only load translation resources currently needed
2. Caching Strategy: Use local storage and memory cache to reduce network requests
3. Resource Optimization: Compress, split, and clean up translation files
4. Request Optimization: Batch loading, preloading, and use CDN
5. Runtime Optimization: Avoid frequent translation, use memo and virtual scrolling
6. Monitoring: Monitor loading performance and error rates
7. Version Control: Use version numbers to manage translation resource updates