async/await 在国际化资源加载中主要用于优雅地处理语言包的异步获取与初始化，支持按需加载、实例初始化、语言切换及缓存优化，提升首屏体验与代码可维护性。
async/await 在国际化资源加载中主要用于**优雅地处理语言包的异步获取与初始化**，避免阻塞渲染、提升首屏体验，同时让逻辑更清晰可维护。
按需加载语言包时用 await 等待 JSON 文件
浏览器不支持直接 import() 动态路径，但现代模块系统（如 Vite/Webpack）支持基于字符串的动态 import。配合 await 可自然等待语言文件加载完成：
- 用 await import(`./locales/${locale}.json`) 加载对应语言包，返回模块对象
- 比 fetch + JSON.parse 更简洁，自动解析，且支持构建时静态分析和代码分割
- 示例：const { default: zhCN } = await import('./locales/zh-CN.json');
初始化 i18n 实例时用 async/await 保证就绪
页面启动时，语言检测和资源加载应串行完成，再触发渲染——这正是 async/await 的典型场景：
- 定义一个 initI18n() 异步函数，先读取用户偏好（localStorage / navigator.language），再加载对应语言包
- 在入口处 await initI18n()，确保 DOM 渲染前翻译数据已就位
- 若用顶层 await（ESM 模块），可在模块顶层直接写：const messages = await import(`./locales/${lang}.json`);
切换语言时用 await 避免状态错乱
用户手动切语言时，需等新语言包加载完再更新界面，否则可能显示旧文本或空值：
立即学习“Java免费学习笔记（深入）”；
- 切换函数声明为 async，内部 await loadLocale(newLang)
- 加载成功后再调用 applyTranslations()，确保所有 data-i18n 元素同步刷新
- 配合 try/catch 处理加载失败：降级到默认语言，避免页面“失语”
结合缓存减少重复 await
多次 await 同一 import() 会重复请求，可用 Map 或 Promise 缓存优化：
- 维护一个 const loaded = new Map()，键为 locale，值为 import() 返回的 Promise
- 下次加载相同语言时，直接 await loaded.get(locale)，复用已有 Promise
- 这样既保持 await 的线性表达力，又避免网络浪费和重复解析
