前端做多语种支持的部署问题, 怎样设计合理?

Question

S3 的前端富应用, 代码一般会经过一次打包, 认为要满足的

• 初次加载的代码打包到一个或者两个 js 文件, 以免加载缓慢
• 页面不要出现因为语音更新的刷新
• 服务端 Java 代码改动测试问题比较大, 尽量不去改动

几种不完美的方案:

• 初次加载打包所有语言, 但这样包的体积难以控制
• 前端异步加载语言吧, 可第一次语言已经渲染上去了, 导致刷新
• 后端判断语言并将 JS 打包, 这样就不能利用好 CDN 了

考虑这些因素, 是否有其他方案可以较好地解决问题呢?

Answer 1

感觉你把需要的方案自己都找出来了。

假定条件是前端实现多语言，那从最后一个方案说起走，

不通的语言放入不同的JS文件，那么输入到浏览器后，浏览器再会请求服务器获取语言js文件，当然会走CDN。是不是你理解错了？

第二个方案也是可行的， 像requirejs 异步加载框架，它是阻塞的并且有回调机制；所以既然是富客户端，总是有一个入口文件，那异步加载语言js后再回调入口函数（入口函数类似bootstrap/init等）。

最后一个方案虽然会让JS很重，但也是一个最最简单的处理方案。你担心所有的语言js会很庞大，具体数据是多少？衡量过网络带宽了吗？文件缓存了吗？考虑过Varnish了吗？还有你提到了CDN,既然都用CDN了还怕压缩后的语言JS文件过大？ 我觉得不必要担心了哦.

这里的多语言应该是本地化，
所以我的解决方案是用英语做为基础语言，
把其他的语言作为对象放入一个文件里面，提供一个接口用来翻译。
类似这样:

function t(str) {
var lan = $.cookie('language');
return languages[lan][str]; // 这里需要做更多的检查来容错
}

调用就简单了：
t("Your name"); // 中文的话，返回： 您的名字, 法文的话就是: votre nom