本地翻译存储
将翻译随应用程序构建包发布,而非通过内容分发网络(CDN)提供
什么是本地翻译?
本地翻译存储在你的应用构建包中,而不是在运行时从 CDN(内容分发网络)获取。当你将 gtx-cli translate 命令加入构建流程时,它会生成 JSON 格式的翻译文件。最后一步是将这些翻译导入到你的应用中以便使用。
有两种方式可以实现:
- 在应用的构建包中(本地):生成后将翻译保存到应用的构建包中
- 在 CDN 中(默认):在运行时从 CDN 获取翻译
默认情况下,gt-next 会从 General Translation 的翻译 CDN 获取翻译。使用我们的 API 为你的应用进行翻译时,翻译会自动保存到我们的 CDN。
默认行为: GT 默认使用 CDN 存储。只有在确有需要其特定优势时,才切换到本地存储。
取舍权衡
本地翻译的优势
- 加载更快:本地翻译由应用直接提供,比通过 CDN(内容分发网络)分发的翻译加载更快
- 无需依赖外部服务:应用加载翻译不受 CDN 可用性的影响;如果某个 locale 未找到翻译,将自动回退到默认语言
- 离线可用:翻译与应用一同打包
本地翻译的缺点
- 更大的 bundle 体积:本地翻译会增大应用的 bundle 大小,可能导致首屏加载变慢
- 内容管理:要编辑一条翻译,每次修改后都必须重新部署应用以包含新的译文
设置
第 1 步:创建加载函数
在 ./src 下添加一个名为 loadTranslations.[js|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 {};
}对于翻译内容稳定、无需频繁更新的应用,使用本地存储效果最佳。
后续步骤
- Middleware 指南 - 语言检测与路由
- 语言指南 - 配置支持的语言
- API 参考:
本指南如何?