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

题叶
  • 17.3k

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

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

几种不完美的方案:

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

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

回复
阅读 3.1k
1 个回答
jackeychen
  • 370

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

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

不通的语言放入不同的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
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏