i18next-http-backend 如何实现翻译资源的远程加载？

i18next-http-backend 简介

i18next-http-backend 是 i18next 的一个插件，用于从远程服务器加载翻译资源。它支持 HTTP 请求、缓存和延迟加载等功能。

安装

bash
npm install i18next-http-backend
# 或
yarn add i18next-http-backend

基本配置

简单配置

javascript
import i18next from 'i18next';
import Backend from 'i18next-http-backend';

i18next
  .use(Backend)
  .init({
    lng: 'en',
    fallbackLng: 'en',
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json'
    }
  });

完整配置

javascript
i18next
  .use(Backend)
  .init({
    lng: 'en',
    fallbackLng: 'en',
    ns: ['translation', 'common', 'errors'],
    defaultNS: 'translation',
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
      addPath: '/locales/add/{{lng}}/{{ns}}',
      parse: (data, lng, ns) => {
        return JSON.parse(data);
      },
      stringify: (data, lng, ns) => {
        return JSON.stringify(data);
      },
      request: (options, url, payload, callback) => {
        // 自定义请求逻辑
        fetch(url, options)
          .then(response => response.json())
          .then(data => callback(null, { data, status: 200 }))
          .catch(error => callback(error, null));
      },
      reloadInterval: false, // 重新加载间隔（毫秒）
      queryStringParams: { v: '1.0.0' } // 添加查询参数
    }
  });

路径配置

动态路径变量

• {{lng}}: 当前语言代码
• {{ns}}: 当前命名空间
• {{projectId}}: 自定义项目 ID

javascript
backend: {
  loadPath: '/api/translations/{{lng}}/{{ns}}?projectId={{projectId}}',
  queryStringParams: {
    projectId: 'my-project-123'
  }
}

多路径配置

javascript
backend: {
  loadPath: (lngs, namespaces) => {
    return namespaces.map(ns => `/locales/${lngs[0]}/${ns}.json`);
  }
}

延迟加载

按需加载命名空间

javascript
// 初始化时只加载默认命名空间
i18next
  .use(Backend)
  .init({
    ns: ['translation'],
    defaultNS: 'translation'
  });

// 需要时加载其他命名空间
i18next.loadNamespaces(['admin', 'settings'], () => {
  console.log('命名空间加载完成');
});

React 中的延迟加载

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

function AdminPanel() {
  const { t, ready } = useTranslation('admin', { useSuspense: false });
  
  if (!ready) {
    return <div>Loading translations...</div>;
  }
  
  return <h1>{t('dashboard.title')}</h1>;
}

缓存机制

使用本地存储缓存

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

i18next
  .use(Backend)
  .use(LocalStorageBackend)
  .init({
    backend: {
      backends: [
        LocalStorageBackend, // 主后端
        Backend // 回退后端
      ],
      backendOptions: [
        {
          expirationTime: 7 * 24 * 60 * 60 * 1000, // 7天
          defaultVersion: 'v1.0.0'
        },
        {
          loadPath: '/locales/{{lng}}/{{ns}}.json'
        }
      ]
    }
  });

自定义缓存逻辑

javascript
backend: {
  loadPath: '/locales/{{lng}}/{{ns}}.json',
  request: (options, url, payload, callback) => {
    const cacheKey = `i18n_${url}`;
    const cached = localStorage.getItem(cacheKey);
    
    if (cached) {
      const { data, timestamp } = JSON.parse(cached);
      const isExpired = Date.now() - timestamp > 3600000; // 1小时
      
      if (!isExpired) {
        return callback(null, { data, status: 200 });
      }
    }
    
    fetch(url, options)
      .then(response => response.json())
      .then(data => {
        localStorage.setItem(cacheKey, JSON.stringify({
          data,
          timestamp: Date.now()
        }));
        callback(null, { data, status: 200 });
      })
      .catch(callback);
  }
}

错误处理

加载失败处理

javascript
i18next
  .use(Backend)
  .init({
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json'
    }
  })
  .catch(err => {
    console.error('翻译资源加载失败:', err);
    // 使用回退翻译
    i18next.addResourceBundle('en', 'translation', {
      welcome: 'Welcome',
      error: 'An error occurred'
    });
  });

重试机制

javascript
backend: {
  loadPath: '/locales/{{lng}}/{{ns}}.json',
  request: (options, url, payload, callback) => {
    let retries = 3;
    
    const attemptFetch = (attempt) => {
      fetch(url, options)
        .then(response => response.json())
        .then(data => callback(null, { data, status: 200 }))
        .catch(error => {
          if (attempt < retries) {
            setTimeout(() => attemptFetch(attempt + 1), 1000 * attempt);
          } else {
            callback(error, null);
          }
        });
    };
    
    attemptFetch(0);
  }
}

性能优化

预加载关键翻译

javascript
i18next
  .use(Backend)
  .init({
    preload: ['en', 'zh'], // 预加载的语言
    ns: ['translation', 'common'] // 预加载的命名空间
  });

批量加载

javascript
// 一次性加载多个命名空间
Promise.all([
  i18next.loadNamespaces(['admin', 'settings', 'reports']),
  i18next.loadLanguages(['en', 'zh', 'fr'])
]).then(() => {
  console.log('所有翻译资源加载完成');
});

最佳实践

1. 版本控制: 在 URL 中添加版本参数，避免缓存问题
2. 错误处理: 实现完善的错误处理和回退机制
3. 性能优化: 使用缓存和延迟加载减少网络请求
4. 监控: 监控翻译资源加载性能和错误率
5. CDN: 使用 CDN 加速翻译资源加载