如何整合本地化（i18n），使其與React應用程序一起擴展？

Question

我目前正在查看各種i18n npm軟件包，大多數人似乎堅持認爲翻譯文件存儲在一個平面文件中，例如， .json格式的文件。我的問題是這是否具有比將數據存儲在數據庫中更大的性能開銷，例如， MongoDB的。

例如，如果我有10,000個翻譯（我們將假定在這個特定的應用程序中，一次只需要一個語言文件，即大多數將使用英文應用程序，並且一些用戶可能想要設置應用程序使用不同的語言），那麼在應用程序甚至可以開始使用之前，這將相當於下載大約200kb的數據。 在React應用程序中，建議的設計模式是使用容器組件加載數據，然後將數據傳遞給「啞」子組件。那麼，以同樣的方式加載翻譯也是沒有意義的，即將翻譯分組爲使用或組件，以便數據僅在需要的時候才從線路發送出去，比如說，從調用MongoDB發送出去？

Answer 1

我會將它整合到您的API中。這意味着您可以創建例如一個REST或GraphQL API，爲您處理這個問題。在i18n中，將數據存儲在層次結構中通常是合理的。這意味着您可以將翻譯分成不同的類別（如頁面），並簡單地請求您真正需要的翻譯。

我真的很喜歡react-starter-kit這樣做的方式。在這個例子中，你可以找到他們如何使用GraphQL API處理它，並只請求這些翻譯，這些翻譯對於渲染頁面來說確實是必需的。希望這可以幫助。

• GraphQL查詢：https://github.com/kriasoft/react-starter-kit/blob/feature/react-intl/src/data/queries/intl.js
• 實施例的組件實現：

  的I18N實施反應起動試劑盒的重要文件https://github.com/kriasoft/react-starter-kit/blob/feature/react-intl/src/components/Header/Header.js

當然，如果你有這樣的量的翻譯，我會使用數據庫更好的系統使用（在反應入門工具包，他們使用簡單的文件存儲，這是不是真的可用於這麼多的翻譯）。一個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> 

用自帶樣品爲： - 的WebPack - CRA - expo.js - next.js - 童話整合 - 拉扎勒 - DAT - ...

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

除此之外，您還應該考慮開發期間的工作流程以及稍後的翻譯工作流程 - >https://www.youtube.com/watch?v=9NOzJhgmyQE