i18next 性能怎么优化？延迟加载/缓存/减少重渲染方案

i18next 性能优化的核心思路是减少首次加载体积和降低不必要的重渲染。延迟加载命名空间是最直接的手段，将非关键翻译（如后台管理页面的文案）设为按需加载，首屏只加载 common 等必要命名空间。配合 i18next-http-backend 实现翻译资源的远程加载，避免将全部语言的 JSON 打进 JS Bundle。语言维度同样按需加载，当前语言加载完毕后再预加载用户可能切换的语言。Bundle 层面，i18next 内部依赖了 lodash，应使用 lodash-es 或手动替换为轻量实现以支持 tree-shaking。React 侧，react-i18next 的 useTranslation 已做细粒度订阅，只监听当前 key 对应的命名空间变化，但仍需避免在渲染函数中频繁调用 t() 生成复杂字符串导致子组件不必要更新，可通过 memo 或提取翻译结果到变量来规避。

追问

如何配置命名空间按需加载？

js
i18n.use(HttpBackend).init({
  ns: ['common', 'admin'],
  defaultNS: 'common',
  backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json'
  }
});

// 页面中按需加载
const { t } = useTranslation('admin');

访问组件时 admin 命名空间才会被请求。

预加载其他语言怎么做？

js
i18n.loadLanguages(['ja', 'ko']).then(() => {
  // 日韩资源已缓存，切换无延迟
});

适合在用户 hover 语言切换按钮时触发。

localStorage-backend 缓存策略是什么？

i18next-localstorage-backend 将请求到的翻译 JSON 存入 localStorage，设置过期时间（默认 7 天）。下次加载直接读缓存，跳过网络请求。需注意缓存失效后的更新策略，可在 allowMultiLoading 模式下批量更新。

如何减少 React 重渲染？

useTranslation 默认只订阅当前命名空间的语言变化。若组件只用到 t('key')，可指定 keyPrefix 缩小订阅范围。对纯展示组件使用 React.memo 包裹，或将翻译结果作为 props 传入，避免因语言上下文变化导致整棵子树重渲染。