@nova-fe/i18next-cache-backend

一个强大的 i18next 后端插件，具有 IndexedDB 缓存、批量加载和智能缓存策略。

特性

• 🚀 高性能: IndexedDB 缓存实现闪电般的翻译加载速度
• 📦 批量加载: 单次请求加载所有翻译内容
• 🔄 智能缓存: 智能的缓存失效和更新机制
• 🌐 离线支持: 支持离线模式下的缓存翻译
• 📱 跨平台: 兼容所有现代浏览器
• ⚡ TypeScript: 完整的 TypeScript 支持和类型定义

安装

npm install @nova-fe/i18next-cache-backend
# or
yarn add @nova-fe/i18next-cache-backend
# or
pnpm add @nova-fe/i18next-cache-backend

快速开始

import i18next from 'i18next';
import { CacheBackend } from '@nova-fe/i18next-cache-backend';

i18next
  .use(CacheBackend)
  .init({
    backend: {
      loadPath: '/api/{{lng}}/{{ns}}',
      fetchStrategy: 'namespace', // 或 'bulk'
    },
    // 其他 i18next 配置选项
  });

配置选项

基础配置

{
  backend: {
    // API 端点模式
    loadPath: '/api/{{lng}}/{{ns}}',

    // 获取策略: 'namespace' 或 'bulk'
    fetchStrategy: 'namespace',

    // 批量端点 (使用 'bulk' 策略时)
    bulkPath: '/api/all',

    // 缓存设置
    cachePrefix: 'i18next-cache',
    cacheTTL: 24 * 60 * 60 * 1000, // 24 小时

    // 请求选项
    requestOptions: {
      headers: {
        'Authorization': 'Bearer token'
      }
    }
  }
}

获取策略

命名空间策略

一次加载一个命名空间的翻译:

{
  backend: {
    loadPath: '/api/{{lng}}/{{ns}}',
    fetchStrategy: 'namespace'
  }
}

批量策略

单次请求加载所有翻译:

{
  backend: {
    loadPath: '/api/{{lng}}/{{ns}}', // 单个请求的回退选项
    bulkPath: '/api/all',
    fetchStrategy: 'bulk'
  }
}

API 参考

CacheBackend

实现 i18next 后端接口的主要后端类。

配置接口

interface CacheBackendConfig {
  loadPath?: string;
  bulkPath?: string;
  fetchStrategy?: 'namespace' | 'bulk';
  cachePrefix?: string;
  cacheTTL?: number;
  requestOptions?: RequestInit;
}

示例

查看 examples 目录获取完整的实现示例:

• React 示例
• Vue 示例

许可证

MIT © Leslie