异步组件多语言加载需语言包按需加载、组件与语言解耦、缓存复用；通过动态 import 按语言码加载 locales/${lang}.json，预加载高频语言，props/context 传递语言数据，Map 缓存已加载语言，失败回退 fallback，CDN 托管+压缩+合理缓存头。
异步组件中处理多语言加载，核心是「语言包按需加载 + 组件与语言解耦 + 缓存复用」。不能把所有语言 JSON 打包进主资源，也不能每次切换都重新请求、重复解析。
语言包动态导入 + 预加载策略
利用 import() 动态导入对应语言包，配合 Webpack 或 Vite 的魔法注释控制 chunk 命名和预加载时机：
- 按国家/语言代码（如 zh-CN、en-US、ja-JP）组织语言文件，路径统一为 locales/${lang}.json
- 在异步组件内部或语言切换逻辑中，用 import(`../locales/${lang}.json`) 加载，构建工具会自动拆成独立 chunk
- 对高频语言（如用户浏览器默认语言），可在初始化时用 import().then(...) 预加载，避免首次渲染延迟
- 低频语言（如 sw-KE）可延迟加载，甚至加 loading fallback 提示
组件内语言上下文隔离
异步组件应避免依赖全局 i18n 实例的实时状态，而是通过 props 或 context 显式接收当前语言数据：
- 不直接调用 i18n.t('key')，改用 props.t 或 useI18n({ useScope: 'local' })（如 Vue I18n 4.x+）
- 语言变更时，只触发该组件重新渲染（而非整个应用），需确保语言数据是响应式的且作用域可控
- 若使用 React，可用 useTranslation(ns, { useSuspense: false }) 配合 Suspense 处理加载状态，避免白屏
缓存与错误降级机制
网络不稳定或语言包缺失时，需有兜底方案，同时避免重复请求相同语言包：
- 用 Map 或 WeakMap 缓存已加载的语言对象，键为 lang + hash（如文件版本号），避免重复 fetch 和 parse
- fetch 失败时，自动回退到上一个成功加载的语言，或内置精简版 fallback 语言（如仅含通用文案的 en.json）
- 支持服务端返回 HTTP 缓存头（Cache-Control: public, max-age=86400），客户端优先走强缓存
- 开发环境可加 mock 层，拦截 locale 请求并返回本地 JSON，加速调试
构建与部署协同优化
语言包体积和分发方式直接影响加载体验：
- 构建时将语言 JSON 单独抽离为 assets/locales/ 目录，CDN 静态托管，避免和 JS bundle 绑定发布周期
- 对长文本较多的语言（如德语、日语），启用 Gzip/Brotli 压缩，并在 Nginx 或 CDN 开启压缩支持
- 考虑按功能模块拆分语言包（如 common.json、dashboard.json），异步组件只加载自己需要的 namespace
- 上线前用 curl -I 检查语言包响应头是否含 Content-Encoding 和合理缓存策略
不复杂但容易忽略：语言包加载不是“一劳永逸”，要把它当作和图片、字体一样的静态资源来设计加载、缓存、错误路径。
