React页面刷新时如何避免显示国际化翻译的自动生成ID

在React项目中使用Intl实现国际化，结合Babel自动扫描应用内的待翻译字符串，但页面刷新时会短暂显示自动生成的6位字符Key，而非defaultMessage中定义的默认文本（网络良好时最多持续200ms，之后才显示正确内容）。

实现步骤 #

1. 组件中添加国际化消息 #

在组件内通过FormattedMessage定义待翻译内容：

<Button variant='outlined'>
  <FormattedMessage
     defaultMessage='BOOK NOW '
     description='Landing page button that enables users to book a room' />
</Button>

2. 本地化脚本配置 #

在package.json中配置本地化脚本，用于提取和编译翻译字符串：

"localize": "npm run localize:extract && npm run localize:compile",
"localize:extract": "formatjs extract \"src/**/*.{ts,tsx}\" --ignore \"./src/**/*.{d,test}.{ts,tsx}\" --out-file src/i18n/source/strings.json --id-interpolation-pattern [sha512:contenthash:base64:6] --extract-source-location",
"localize:compile": "formatjs compile src/i18n/source/strings.json --out-file src/i18n/translated/en-US.json"

生成的strings.json格式 #

执行脚本后，生成的src/i18n/source/strings.json包含自动生成的ID及对应信息：

[...,
"w6dUlI": {
  "col": 44,
  "defaultMessage": "BOOK NOW",
  "description": "Landing page button that enables users to book a room",
  "end": 19431,
  "file": "src/components/popup/Landing.tsx",
  "line": 404,
  "start": 19218
},...]

现状与疑问 #

流程配置看似正常，已正确加载对应语言环境的Provider，但在页面加载的前200ms内，本该显示defaultMessage，实际却显示自动生成的ID。同类型的公开示例项目也存在此问题。

手动为FormattedMessage指定ID时，加载阶段会显示手动设置的ID，虽比随机字符更友好，但违背了自动生成ID的初衷。猜测问题可能是切换语言时对应JSON翻译文件尚未下载完成，但无法确认具体原因。

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