Question

我目前正在查看各种i18n npm软件包，并且大多数人似乎坚持将翻译存储在平面文件中，例如.json格式化文件。我的问题是，这是否具有比将语言存储在数据库中更大的性能开销，例如， MongoDB的。

例如，如果我有10,000个翻译（我们假设在这个特定的应用程序中，一次只需要一个语言文件，即大多数将使用英语应用程序，一些用户可能想要将应用程序设置为使用不同的语言。）然后，这相当于在应用程序甚至可以开始使用之前下载大约200kb的数据。在React应用程序中，建议的设计模式是使用容器组件加载数据，然后将数据传递给“哑”子组件。那么，以同样的方式加载翻译是没有意义的，即将翻译分组为用法，还是按组件分组，这样数据只在需要时才发送到线路上，比如从MongoDB调用？

Answer 1

我会将它集成到您的API中。这意味着您可以创建例如REST或GraphQL API，为您处理此问题。在i18n中，将数据存储在层次结构中通常是合理的。这意味着您可以将翻译分成不同的类别（如页面），只需请求您真正需要的翻译。

我非常喜欢在react-starter-kit中这样做的方式。在此示例中，您将了解它们如何使用GraphQL API处理它，并且仅请求那些在呈现页面时真正需要的转换。希望这可以帮助。

react-starter-kit的i18n实现的重要文件：

GraphQL查询：https://github.com/kriasoft/react-starter-kit/blob/feature/react-intl/src/data/queries/intl.js
示例组件实现：https://github.com/kriasoft/react-starter-kit/blob/feature/react-intl/src/components/Header/Header.js

当然，如果你有这么多的翻译，我会使用数据库来获得更好的系统使用（在react starter kit中，他们使用简单的文件存储，这对于这么多的翻译来说并不是真的可用）。一个mongodb将是我的第一选择，但也许这只是我自己的灵活性和自己的知识偏好。

Answer 2

显然，您不希望在客户端上加载每种语言。我对您描述的模式的理解是使用容器组件在启动时加载整个应用程序的相关语言。

当用户切换语言时，您的容器将从服务器加载相关的语言文件。

这应该适用于小型/中型应用程序，但有一个缺点：在加载JS代码加载i18n数据后，您需要向服务器发送另一个请求。

解决此问题的另一种方法是使用代码拆分（可能还有服务器端渲染）技术来实现这个工作流程：

服务器构建一个包含一部分i18n数据的小包
当用户浏览您的应用时，客户端会根据需要加载其余的应用代码和关联的i18n数据

Answer 3

如果还没看过https://react.i18next.com/，可能是个不错的建议。它基于i18next：学习一次 - 随处翻译。

您的代码将类似于：

<div>{t('simpleContent')}</div>
<Trans i18nKey="userMessagesUnread" count={count}>
  Hello <strong title={t('nameTitle')}>{{name}}</strong>, you have {{count}} unread message. <Link to="/msgs">Go to messages</Link>.
</Trans>

附带样品： - 网络包 - 疯了 - expo.js - next.js - 故事书整合 - 拉什 - dat - ......

https://github.com/i18next/react-i18next/tree/master/example

除此之外，您还应该考虑开发过程中的工作流程以及稍后为翻译人员考虑的工作流程 - ＆gt; https://www.youtube.com/watch?v=9NOzJhgmyQE

如何集成本地化（i18n）以便它与React应用程序一起扩展？

3 个答案: