React多本地化应用UI文本存储的最佳实践是什么？

主流的实现方案会兼顾打包体积、加载速度和模块化维护需求，具体实践如下：

• 统一管理翻译资源
  不要将文本分散在业务代码中，也不要将全量多语言文本打入业务包。统一在public/locales目录下按「语言-业务模块」的维度拆分存储静态JSON文件，参考目录结构：

  public/
    locales/
      zh-CN/
        common.json # 全局通用文案：确定、取消、通用提示等
        dashboard.json # 仪表盘模块专属文案
        user.json # 用户中心模块专属文案
      en-US/
        common.json
        dashboard.json
        user.json
  

  该方式既方便翻译人员统一维护所有文案，也不会增加业务JS包的体积。
• 按需加载+缓存翻译资源
  配合成熟的国际化库（如react-i18next）实现资源的按需拉取，不需要每个组件单独发请求，也不用一次性拉取全量文本：
  • 应用初始化时仅拉取当前用户语言的common通用文案
  • 进入对应业务路由/模块时，再异步拉取该模块对应的当前语言文本
  • 已经拉取过的文本资源会存入本地缓存，重复访问时无需二次请求
• 适配不同渲染场景
  • 客户端渲染场景下，翻译资源走CDN分发，异步加载的逻辑完全封装在国际化库中，业务组件只需要声明自己依赖的翻译命名空间即可，不会破坏代码模块化
  • SSG/SSR场景下，可以在服务端渲染阶段直接注入当前页面需要的所有文本，完全消除客户端请求的延迟

你之前顾虑的两个方案的问题都可以通过上述逻辑解决：

1. 文本不会分散在业务文件中，也不会被打入业务包，不会拖累站点加载速度
2. 不会出现大量零散的文本请求，也不需要全量拉取所有文本，模块拆分逻辑不受影响

内容的提问来源于stack exchange，提问作者Abraham