【出海避坑】别再装臃肿的多语言插件了！我是如何用 15KB 纯前端字库拿下全球港澳台读者的？

来自自媒体主理人的真实发端

“这个‘翻译站点’是个什么功能？我觉得百度很差，点开完全没有翻译还报错，能不能换 Google 接口？…… 其实我的网站就是中文的呀，把我的网站改成简体中文和繁体中文两种语言供全球华人使用，你觉得呢？”
—— 当我们在工具详情页发现那个写死的红色“百度翻译站点”点开就是一片刺眼的报错白页时，老汪提出了这个极其接地气的灵魂决策。

很多出海建站的新手，一听说要做“全球化、多语言”，张口闭口就是 WPML、Polylang、TranslatePress 这些庞然大物。但是对于一个垂直领域的 AI 导航与知识库站点来说，贸然安装大型多语言插件往往是噩梦的开始：数据库容量翻倍膨胀、前台加载速度断崖式下跌、每一篇工具文章都在后台分裂出冗余的空壳副本，甚至引起 Google 爬虫在 hreflang 权重判定上的相互踩踏。

一、翻车现场：死链接的“百度翻译”与被墙的 Google 翻译

市面上很多 WordPress 主题（包括知名商业主题）在出厂设计时严重脱离真实业务场景。以一为主题（OneNav）为例，只要检测到收录的工具不是中文，详情页右侧就会硬塞一个极其扎眼的红色按钮：

▲ 图 1：老汪排查时截取的翻车现场：红色“翻译站点”直通百度 Transpage 报错死链

读者兴冲冲点进去，看到的却是百度年久失修、无法解析外部 SPA 单页应用的空白报错页！而想换成 Google 翻译？早在 2022 年 10 月，谷歌就全面关停了中国大陆的 Google 翻译服务（translate.google.cn），国内用户访问直接超时报错。

二、真实定位：华人出海圈的核心读者到底在哪里？

老汪果断叫停了华而不实的“多语种机翻幻想”，回归客观的自媒体受众真相：

我们做的是高质量的中文 AI 工具评测与出海工作流，目标读者就是全球华人；
受众由两大部分构成：中国大陆读者（习惯简体），以及中国香港、中国台湾、中国澳门、新马及欧美华人（习惯繁体）；
海外华人读者看到简体字虽然大体能认，但阅读习惯依然是繁体（正体中文）。如果能一键即时繁简转换，阅读体感会直线上升！

三、架构破局：15KB 纯前端双向映射与零数据库开销

为了保证 FocusOnV2EX 闪电般的加载速度，我们坚决不改动数据库，采用了一套纯前端、无依赖、轻量至极的毫秒级转换引擎：

1. 2,536 个高频汉字 1-to-1 双向平行映射

提炼开源 TongWen 规范，将简繁汉字精简压缩为两个并行的 UTF-8 字符串（s_dict 与 t_dict），整包大小仅 15KB。在浏览器内存中只需 0.001 秒即可完成映射表构建。

// 核心递归替换引擎（自动跳过 SCRIPT, STYLE, INPUT 等保护标签）
function walkDOM(node, fn) {
    if (!node) return;
    var skipTags = ['SCRIPT', 'STYLE', 'CODE', 'PRE', 'TEXTAREA', 'INPUT', 'NOSCRIPT'];
    if (skipTags.indexOf(node.nodeName) !== -1) return;
    if (node.nodeType === 3) {
        var val = node.nodeValue;
        if (val && val.trim()) {
            var newVal = fn(val);
            if (newVal !== val) node.nodeValue = newVal;
        }
    } else {
        for (var child = node.firstChild; child; child = child.nextSibling) {
            walkDOM(child, fn);
        }
    }
}

2. 浏览器环境智能预选 + localStorage 持久化记忆

首次访问站点的访客，系统自动通过 navigator.language 嗅探：如果是 zh-TW、zh-HK、zh-MO 或 zh-Hant，默认直接以繁体中文呈现；大陆及其他用户默认呈现简体。一旦用户手动点击右上角药丸按钮，偏好永久保存在 localStorage 中，跨页面跳转无缝保持。