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

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

• 不需要支持站内实时切换语言，需刷新页面完成切换。
• 平台包含大量业务页面，导致语言包体积庞大且各页面语言包独立性高；故尽可能的切割语言包，如按路由拆分，按需获取。
• 考虑到部分页面内容需要提前就需确定，无法采用异步加载语言包的方式。

颗粒化方案

方案核心

方案的核心是将国际化颗粒度细化到极致，通过以下步骤实现：

1. 极致颗粒度国际化：将每个文本片段都独立处理。
2. 利用 Tree Shaking：通过 TypeScript 的特性，移除未使用的 i18n 变量，减少体积。
3. vite 插件提取 i18n 内容：将语言包按需拆分。
4. 打包压缩：通过变量压缩等手段进一步减小语言包体积。

调研

https://github.com/fnando/i18n

I18nextProvider | react-i18next documentation

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

I18nextProvider | react-i18next documentation

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