本地翻译存储

将翻译随应用程序构建包发布,而非通过内容分发网络(CDN)提供

什么是本地翻译?

本地翻译存储在你的应用构建包中,而不是在运行时从 CDN(内容分发网络)获取。当你将 gtx-cli translate 命令加入构建流程时,它会生成 JSON 格式的翻译文件。最后一步是将这些翻译导入到你的应用中以便使用。

有两种方式可以实现:

  1. 在应用的构建包中(本地):生成后将翻译保存到应用的构建包中
  2. 在 CDN 中(默认):在运行时从 CDN 获取翻译

默认情况下,gt-next 会从 General Translation 的翻译 CDN 获取翻译。使用我们的 API 为你的应用进行翻译时,翻译会自动保存到我们的 CDN。

默认行为: GT 默认使用 CDN 存储。只有在确有需要其特定优势时,才切换到本地存储。

取舍权衡

本地翻译的优势

  • 加载更快:本地翻译由应用直接提供,比通过 CDN(内容分发网络)分发的翻译加载更快
  • 无需依赖外部服务:应用加载翻译不受 CDN 可用性的影响;如果某个 locale 未找到翻译,将自动回退到默认语言
  • 离线可用:翻译与应用一同打包

本地翻译的缺点

  • 更大的 bundle 体积:本地翻译会增大应用的 bundle 大小,可能导致首屏加载变慢
  • 内容管理:要编辑一条翻译,每次修改后都必须重新部署应用以包含新的译文

设置

第 1 步:创建加载函数

./src 下添加一个名为 loadTranslations.[js|ts] 的文件,并将以下内容粘贴到其中:

src/loadTranslations.ts
export default async function loadTranslations(locale: string) {
  const translations = await import(`../public/_gt/${locale}.json`);
  return translations.default;
}

withGTConfig 会自动从 src/ 目录或项目根目录中检测到 loadTranslations.[js|ts] 文件。

步骤 2:配置 CLI(命令行界面)

运行配置命令并选择本地存储:

npx gtx-cli configure

当出现提示时:

  • 保存到内容分发网络(CDN)? 选择“否”
  • 翻译目录: 输入 ./public/_gt

或者,你可以手动配置 gt.config.json 文件以使用本地翻译。有关更多信息,请参阅命令行界面(CLI)配置文档

步骤 3:生成译文

现在,当你运行 translate 命令时,译文会自动下载并纳入你的代码库:

npx gtx-cli translate

翻译将存储在 public/_gt/ 中,并随您的应用一同打包。

构建集成

Next.js 构建流程

在构建脚本中加入翻译生成步骤:

{
  "scripts": {
    "build": "npx gtx-cli translate && <...你的构建命令...>"
  }
}

CI/CD 管道

# .github/workflows/deploy.yml
- name: 生成翻译
  run: npx gtx-cli translate
  
- name: 构建应用  
  run: npm run build

常见问题

缺少翻译文件

请在构建前先生成翻译:

# ❌ 未生成翻译就构建
<...YOUR_BUILD_COMMAND...>

# ✅ 先生成翻译
npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>

导入路径错误

在 load 函数中对齐你的目录结构:

// ❌ 错误的路径
const t = await import(`../translations/${locale}.json`);

// ✅ public/_gt 的正确路径
const t = await import(`../public/_gt/${locale}.json`);

Bundle 体积过大

对于支持多语言的应用,建议进行代码拆分:

// 仅在需要时加载翻译
export default async function loadTranslations(locale: string) {
  // 仅在当前 locale 激活时加载
  if (locale === getCurrentLocale()) {
    const translations = await import(`../public/_gt/${locale}.json`);
    return translations.default;
  }
  return {};
}

对于翻译内容稳定、无需频繁更新的应用,使用本地存储效果最佳。

后续步骤

本指南如何?