摘要

云音乐海外项目分享多语言支持的发展历程，从流行库的问题到千语平台的建立及自动化优化，包括解决的问题、提升的效率和性能，还提及面临的挑战。

一、背景

国际化产品需考虑多语言文本贴合当地语种，云音乐海外项目探索如何更好地渲染前端文本，本文侧重分享多语言文案消费端开发经验。

二、流行的多语言库

（一）i18next 及 react-i18next

• i18next 是前端国际化 JavaScript 库，有简单易用的 API，支持多种资源格式、动态加载和缓存翻译资源。

// 初始化 i18next 示例
// i18n.js
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
i18n
.use(LanguageDetector)
.use(initReactI18next)
.init({
    debug: true,
    fallbackLng: "en",
    interpolation: {
      escapeValue: false
    },
    resources: {
      en: {
        translation: {
          welcome: "Welcome to my website"
        }
      },
      zh: {
        translation: {
          welcome: "欢迎来到我的网站"
        }
      }
    }
  });
export default i18n;

• react - i18next 基于 i18next，是 React 绑定库，提供组件和高阶组件用于 React 应用国际化。

// 在 React 中使用示例
// app.js
import { useTranslation, Trans } from "react-i18next";
function App() {
  const { t } = useTranslation();
  return (
    <div>
      <main>
        <p>{t("welcome")}</p>
      </main>
    </div>
  );
}
export default App;

（二）vue - i18n

• 用于 Vue.js 应用程序国际化，支持多种语言切换策略、动态和异步加载翻译资源。

// 示例代码
// 准备翻译的语言环境信息
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
};
// 通过选项创建 VueI18n 实例
const i18n = new VueI18n({
  locale: 'ja', // 设置地区
  messages // 设置地区信息
});
<div id="app">
  <p>{{ $t("message.hello") }}</p>
</div>

• 这些流行库用法相似，都是内置多语种文案，业务代码调用 i18n 方法传入文案 key 来渲染，但云音乐海外项目使用时发现诸多问题，如写法复杂、不符合语意化、回溯困难、维护困难、代码冗余、项目迁移难度大等。

三、方案的演变

（一）千语管理平台

• 问题：最初用 Excel 统一填写维护文案存在复用率低下、维护成本高、沟通困难等问题。
• 解决方案：建立统一的国际化管理平台（千语平台），具有通知翻译、多语种文案长度对比、Excel 批量处理、集成翻译服务、版本控制、角色和权限管理等功能。
• 使用流程：创建应用、创建模块、创建文案发布。

（二）千语自动化

1. 千语自动化 1.0

• 问题：最初基于 i18next 和 react-i18next 的多语言方案效率不佳，工作流程需频繁切换平台和 IDE，代码语义表达不清晰。
• 优化流程：
  • 简化代码书写：使用$i18n('中文')书写。
  • 自动化文案管理：开发人员无需手动创建录入文案，插件自动提取中文文案创建 key 并上传。
  • 自动发布文案：文案上传后自动触发发布流程。
  • 自动化版本管理：取消手动修改 CDN 版本号步骤。
• 实现方案：两阶段自动化方案，第一阶段文案自动替换（利用 babel 插件分析 AST 替换节点），第二阶段文案自动提取与上传（代码提交前扫描修改代码，自动上传新文案并触发发布）。
• 重点部分：资源缓存工具包缓存版本号和文案资源，初始化时对比版本号，涉及复杂的 AST 相关技术，如 babel-plugin 和 commit 时执行的 node 脚本。

2. 千语自动化 2.0：性能优化方案

• 问题：之前自动化方案存在多语言资源加载增加首屏加载时间、库依赖增加项目体积、渲染延迟影响用户体验、不支持 SSG 预构建等性能问题。
• 解决方案：
  • 编译阶段改进：引入 I18N_LANGUAGE 环境变量，自定义 babel 插件将中文���案直接替换为对应语种文案。
  • 产物输出阶段调整：调整构建产物 publicPath，每个语种构建产物放独立目录。
  • 消费产物变更：调整访问路径，根据 APP 选择的语种加载对应语种构建包。

四、总结

云音乐海外项目多语言方案相比早期手动处理提高了开发效率，解决了诸多问题，克服了性能挑战，但仍面临更多优化提升的挑战。