JavaScript 中怎么用动态导入加载多语言国际化语言包资源-js教程-PHP中文网

JavaScript动态导入多语言资源的核心是按需、异步、模块化加载语言模块以减小初始包体积。1. 语言包组织为独立ES模块（如zh.js）并默认导出JSON；2. 用import()动态加载并缓存Promise防重复请求，失败回退默认语言；3. 结合t()函数实现运行时语言切换与插值；4. 构建工具支持可预测的动态路径import(./locales/${lang}.js)，自动打包匹配文件。

javascript 中怎么用动态导入加载多语言国际化语言包资源

JavaScript 中用动态导入（import()）加载多语言资源，核心是按需、异步、模块化地载入对应语言的 JSON 或 JS 模块，避免打包时全量引入，减小初始体积。

1. 语言包组织成独立模块

把每种语言存为单独的 ES 模块（推荐 .js 而非纯 JSON），便于类型提示和默认导出：

locales/zh.js：export default { "hello": "你好", "loading": "加载中..." };
locales/en.js：export default { "hello": "Hello", "loading": "Loading..." };
locales/ja.js：export default { "hello": "こんにちは", "loading": "読み込み中..." };

2. 动态导入 + 缓存管理

调用 import() 加载指定语言模块，同时缓存 Promise 避免重复请求：

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

const localeCache = new Map();

async function loadLocale(lang) {
  if (localeCache.has(lang)) return localeCache.get(lang);

  try {
    const module = await import(`./locales/${lang}.js`);
    localeCache.set(lang, module.default);
    return module.default;
  } catch (err) {
    console.warn(`Failed to load locale: ${lang}`, err);
    // 回退到默认语言（如 en）
    return (await import('./locales/en.js')).default;
  }
}

3. 结合 i18n 使用（如简单函数式方案）

定义一个可切换的语言上下文，配合动态加载使用：

let currentLocale = {};
let currentLang = 'en';

export async function setLanguage(lang) {
  currentLocale = await loadLocale(lang);
  currentLang = lang;
}

export function t(key, replacements = {}) {
  let text = currentLocale[key] || key;
  Object.entries(replacements).forEach(([k, v]) => {
    text = text.replace(`{{${k}}}`, v);
  });
  return text;
}

// 示例：切换语言
setLanguage('zh').then(() => {
  console.log(t('hello')); // 输出：你好
});