超大规模 ReactJs 应用中的 I18n答案

【问题标题】：I18n in ReactJs app of very large scale超大规模 ReactJs 应用中的 I18n
【发布时间】：2017-11-15 14:32:54
【问题描述】：

你有在超大型 React 应用中实现内部化/本地化的经验吗？

我们正在讨论数千个字符串和大约 20 种语言在浏览器中加载它并不是一个好主意:) 所以应该在服务器端完成。但我不确定即使发送一种语言的整个文件（例如 en_US 的所有翻译）是否是一个好主意。

是否有一个选项可以实现仅从这样的翻译 json 获取服务器端 nestedStrings

{
  topLevel : "a",
  topLevel2 : "b",
    nestedProperty : {
        someting : "C"
    }

或者我应该编写自定义解决方案吗？

【问题讨论】：

您绝对可以编写某种 REST 服务来提供数据子集。你问这样的系统是否已经存在？因为 1) that type of question would be considered off-topic 和 2) 这取决于您的服务器技术。
如果可以的话，帮助，我个人使用基于 i18next 的react-i18next。它允许您在多个命名空间上处理多种语言，以便为像您这样的大型项目分块文件。这是固执己见，所以只是把它当作一种做事的方式，而不是真正回答你的问题。

【解决方案1】：

您可以使用 cmets 中提到的 react-i18next (https://github.com/i18next/react-i18next)，另外：

您可以按模块拆分翻译，例如进行代码拆分（所有这些都已经完成 - 无需额外工作）
如果您也需要，i18next 也可以在大多数服务器环境上运行：https://www.i18next.com/supported-frameworks.html（并非所有都可以/应该在客户端完成）
奖励：在这种规模下，您将需要一个翻译管理工具来跟上您的发展 -> https://locize.com 来自同一个团队，并实现了惊人的工作流程 -> 查看自动添加内容到您的翻译的示例项目，上下文编辑，...https://github.com/i18next/react-i18next/tree/master/example/locize-example（自述文件中的视频链接）

【讨论】：

代码分割并不是那么容易，因为你只知道运行时的语言。您需要一个额外的步骤来为每种语言创建一个块。 github.com/whitecolor/lp-loader 似乎就是这样做的。也许还有其他人。