使用i18next-http-backend懒加载翻译时页面闪烁问题咨询

关于加载新namespace触发页面闪烁的推测 #

你的推测完全合理。默认配置下，react-i18next会在新namespace加载完成后触发全局重渲染，若页面组件未做渲染优化、或存在布局/滚动位置相关的副作用逻辑，就会出现闪烁、滚动位置偏移的问题。

现有配置的问题 #

你当前的本地资源定义存在错误：

// 错误写法：直接展开de和en会导致同key的内容互相覆盖，不符合i18next资源结构要求
const localResources = { ...de, ...en };

// 修正为分层结构
const localResources = {
  de: de,
  en: en
};

解决闪烁问题的方案 #

在i18n初始化配置中新增react相关配置，限制全局重渲染的触发时机，同时用Suspense隔离加载状态：

.init({
  // 保留你原有其他配置
  react: {
    // 仅在语言切换时触发全局重渲染，加载新namespace不触发全局更新
    bindI18n: 'languageChanged',
    bindI18nStore: 'added',
    // 开启Suspense支持，隔离局部加载状态
    useSuspense: true
  }
})

之后将你的可折叠区块内部需要加载新namespace的内容，用React.Suspense包裹，自定义加载占位符即可，加载新资源时只会影响折叠区块内部，不会触发页面全局变化：

<Collapse>
  <Suspense fallback={<div>加载中...</div>}>
    {/* 原有需要使用新namespace的内容 */}
  </Suspense>
</Collapse>

提前获取所有namespace的方案 #

由于前端无法直接读取public目录的文件列表，可采用以下两种方案实现：

• 维护namespace清单：要求翻译维护人员更新翻译文件时，同步更新/public/locales/ns-list.json，内容为所有namespace的名称数组。你可以在i18n初始化前先请求该清单，按需选择预加载全部或部分namespace。
• 按需预加载：不需要提前知道全量namespace，在用户hover折叠区块触发按钮时，提前调用i18n.loadNamespaces(当前区块需要的namespace)，等用户点击展开时资源已经加载完成，完全不会出现加载卡顿。

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