i18n.reloadResources() 无效是因为它仅发起网络请求获取新翻译，不自动注入或触发视图刷新；必须配合 changeLanguage()、显式事件发射及 useTranslation 包裹组件才能生效。
热更新失败时，i18n.reloadResources() 为什么没用？
因为多数 i18n 库（比如 i18next）的 reloadResources() 默认只触发网络请求，不自动注入新翻译、也不触发视图刷新。它只是“拉下来”，不是“换上去”。
常见错误现象：console 显示请求成功，但页面文字没变；或切换语言后旧 key 仍显示 fallback 内容。
- 必须手动调用
i18n.changeLanguage(lang)或i18n.reloadResources(lang, ns)后显式触发i18n.emit('languageChanged', lang) - 如果用了
react-i18next，需确保组件包裹了useTranslation或withTranslation，否则languageChanged事件不会触发重渲染 - 服务端返回的 JSON 必须是纯对象（不能带
export default或module.exports），否则前端解析会静默失败
HTML 中直接写 data-i18n 属性，怎么让它随热更新重译？
原生 HTML 不监听 i18n 实例变化，data-i18n 是初始化时一次性读取的，后续语言变更完全无感知。
可行做法是用轻量级指令式补丁，而非重写整套模板系统：
立即学习“前端免费学习笔记（深入）”；
- 在
i18n.on('languageChanged')回调里，遍历所有含data-i18n的元素：document.querySelectorAll('[data-i18n]') - 对每个元素，用
i18n.t(key, { lng: currentLng })获取新文案，再赋值给el.textContent或el.title（注意区分innerText和textContent对空格/换行的处理） - 避免在
languageChanged里操作innerHTML—— 会清空事件绑定和子组件状态
Webpack 热更新（HMR）和 i18n 热更新能共存吗？
可以，但必须隔离作用域：HMR 处理的是 JS 模块依赖图，i18n 热更新走的是 HTTP 请求+运行时替换，二者路径不同、生命周期不同，硬绑在一起反而容易互相干扰。
典型翻车点：
- 把翻译 JSON 当作
import进 JS 文件（如import zh from './locales/zh.json'），Webpack HMR 会 reload 整个模块，导致 i18n 实例被重建，已注册的插件、事件监听全部丢失 - 在
module.hot.accept回调里直接调用i18n.addResourceBundle，但没校验当前语言是否匹配该 bundle，结果切到 en 时却加载了 zh 的 key - 建议方案：翻译文件全部走
fetch加载，HMR 只用于调试时快速查看 JS 逻辑变更，不参与国际化流程
CDN 缓存导致新翻译 JSON 拿不到最新版？
不是配置问题，是路径没变 —— 如果 URL 仍是 /locales/en.json，CDN 就按缓存策略返回旧内容，浏览器甚至不会发新请求。
解决方式不是关 CDN，而是让 URL 带可变指纹：
- 构建时生成版本号文件（如
locales-manifest.json），内容为{"en": "en.a1b2c3.json"}，前端先请求它，再拼出带哈希的 URL - 或者服务端加响应头：
Cache-Control: no-cache, must-revalidate，但仅限/locales/路径，避免影响其他静态资源 - 别用时间戳（
?t=1715829340）—— 容易被代理层忽略，且污染浏览器缓存历史
真正麻烦的从来不是“怎么换文本”，而是“怎么确保每个环节都拿到同一份新数据” —— 从 CDN 到 fetch 请求、再到 i18n 实例内部缓存，漏掉一层，热更新就卡在半路。
