最近公司平台需国际化改造,以适配不同语言环境。基于特定需求,展开了一系列技术探索与实践。

但是平台的国际化需满足以下前提:

为了应对这些挑战,我们进行了深入调研,得到了两版国际化方案。

调研

https://github.com/fnando/i18n

https://react.i18next.com/latest/i18nextprovider

在调研过程中,我们发现大多数 i18n 实现库都侧重于站内切换语言,这会导致同时加载多个语言包,随着页面增多,语言包体积膨胀,不符合我们的需求。

I18nextProvider | react-i18next documentation

不过,我们注意到了 I18nextProvider,它通过提供不同的 i18n 实例来加载不同的语言包,能在一定程度上实现路由间的分片加载,这启发了我们在第二版方案中实现类似的功能。

此外,对于异步加载语言包的方案,如将语言包放在 public 目录下,根据语言动态加载,虽然可行,但因一些限制,我们无法采用这种方式。

第一版:颗粒化

第一版方案的核心是将国际化颗粒度细化到极致,通过以下步骤实现:

  1. 极致颗粒度国际化:将每个文本片段都独立处理。