html国际化无法原生热更新，因fetch单次请求且浏览器不监听文件系统；需改用import()动态导入+hmr接管，或加时间戳绕缓存、监听storage手动触发重载。
HTML 工程化中无法实现真正意义上的“国际化资源热更新”——data-i18n 标记、JSON 语言包、document.documentElement.lang 这些都是静态或运行时一次性加载的机制，没有原生热更新通道。所谓“热更新”，本质是 JavaScript 主动监听变更并局部刷新 DOM，不是 HTML 自己触发的。
为什么 fetch 语言包后改 JSON 文件不会自动生效
浏览器不会监视本地文件系统；开发时用 http-server 或 webpack-dev-server 启动服务，修改 locales/zh.json 文件后，页面不会感知——因为 JS 只在初始化或手动调用时 fetch 一次。没有监听器，就没有响应。
-
fetch是单次请求，不建立长连接，也不订阅文件变更 - 即使你用
MutationObserver监听data-i18n属性，它只响应 DOM 属性变化，不响应外部 JSON 文件内容变化 - Webpack 的
hot模式只对模块（.js、.css）生效，.json默认不参与 HMR，需额外配置module.rules+accept声明
如何让语言包改动“看起来像热更新”
核心思路：把语言包变成可 HMR 的模块，绕过 fetch，改用 import() 动态导入 + Webpack HMR 接口主动接管更新逻辑。
- 将
locales/zh.json改为locales/zh.js，导出默认对象：export default {"home.title": "首页"} - 在 i18n 初始化逻辑中，用
import(`./locales/${lang}.js`)加载，而非fetch - 在模块顶部加
if (module.hot) { module.hot.accept(...)，捕获更新后调用updateAllI18nNodes() - 必须手动调用
updateAllI18nNodes()，不能依赖框架自动重渲染——HTML 没有虚拟 DOM
注意：import() 返回 Promise，HMR 触发时需确保旧语言数据已卸载，避免内存残留；IE11 不支持动态 import，需 fallback 到传统 fetch + 全量 reload。
开发阶段可用的轻量替代方案
不改构建链路，也能快速验证语言包修改效果，关键是绕过缓存 + 触发重加载逻辑：
- 给
fetchURL 加时间戳参数：fetch(`/locales/${lang}.json?t=${Date.now()}`)，禁用强缓存 - 监听
localStorage变更：window.addEventListener('storage', e => { if (e.key === 'i18n-lang') reloadI18n() })，配合浏览器插件或控制台手动localStorage.setItem('i18n-lang', 'en') - 在页面加调试按钮：
<button onclick="loadLocale('en')">Reload EN</button>，点击即重新fetch并更新 - 避免用
btn.dataset.i18n = 'new_key'——这不会触发data-属性变更事件，得用btn.setAttribute('data-i18n', 'new_key')
真正的难点不在“怎么更新”，而在“更新后状态是否一致”：表单输入值、滚动位置、Intl.DateTimeFormat 实例、第三方组件语言设置都得同步重置——这些没法靠一个 JSON 文件变更自动完成。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
