阅读 4138
几分钟优化你的国际化

几分钟优化你的国际化

前言

本文针对国际化翻译数据多,并存放在服务器的情况,对优化进行了思考,并写了了一个插件github.com/jmx16449196…,供大家参考或使用。抛砖引玉,如果有需要改进的地方,希望大家指正。

需求背景

我司单页面应用中的国际化功能存在两个可优化的点:

  • 国际化翻译数据存在了数据库中。每次切换语种或重新加载页面,都需要请求一次接口,接口大概会耽误1s,十分影响用户体验,特别是首屏加载。

  • 由于所有数据都存放在数据库,所以首屏加载时,请求接口前都没有翻译数据可用。

优化方案

针对第一个问题,使用缓存

针对第二个问题,我把翻译数据分为了两份:

静态翻译数据:写死在js中,用于存在一些基础的翻译数据,即使断网了,用户也可以看到正常的页面。

动态翻译数据:从接口获得,这部分数据可以让用户通过相关配置页面去修改。

优化后的页面在进入时,可以分为以下阶段:

image

关键代码

// 创建实例并调用
const translateManager = new TranslateManager({/*传参*/})
translateManager.update('en', (res) => {
    // 触发相应的更新视图的逻辑
    // 例如在vue中,使用了vue-i18n,你可以
    i18n.setLocaleMessage(res.data);
});


class TranslateManager {
  STORAGE_KEY: string
  expireTime: number
  requestFn: Function | null
  staticTranslateData: object
  
  /**
   * 构造函数
   * @param params 
   */
  constructor(params: constructorParams) {
    this.expireTime = params.expireTime || Infinity; // 前端缓存有效时间
    this.STORAGE_KEY = params.storageKey || 'TranslateManager';
    this.requestFn = params.requestFn;
    this.staticTranslateData = params.staticTranslateData || {};
  }
  setRequestFn(fn: Function) {
    this.requestFn = fn;
  }
  /**
   * 设置缓存
   * @param {String} language 
   */
  setCache(language: string, data: object) {
    // 请求完成后缓存
    const storageData = jsonParse(localStorage.getItem(this.STORAGE_KEY)) || {};
    storageData[language] = data;
    storageData['time'] = new Date().getTime();
    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(storageData));
  }
  /**
   * 从缓存中读取
   * @param language 语种
   */
  getCache(language: string) {
    const storageData = jsonParse(localStorage.getItem(this.STORAGE_KEY)) || {};
    if (storageData && storageData['time'] && storageData[language]) {
      const time = storageData['time'];
      const now = new Date().getTime();
      // 缓存只有两小时
      if (now - time <= this.expireTime) {
        return storageData[language] || null;
      }
    }
    return null;
  }
  /**
   * 获取后端的静态国际化数据
   */
  getDynamicTranslateData(language: string) {
    if (!this.requestFn) {
      console.error('请先执行setRequestFn!');
      return Promise.reject();
    }
    return this.requestFn({language}).then((res: object) => {
      this.setCache(language, res);
      return res;
    });
  }
  /**
   * 获取前后端交集后的国际化数据
   * @param {*} language 
   */
  getMergeTranslateData(language: string) {
    // 没缓存就发起请求
    return this.getDynamicTranslateData(language).then((res: any) => {

      const data = this.staticTranslateData[language] || {};
      // 部分国际化写在了前端,把前端的国际化文件合并到后端返回的数据中
      merge(res, data)
      if (isEmptyResult(res)) {
        return Promise.reject(new Error('locale empty !!'))
      }
      return res;
    })
  }
  /**
   * 主方法
   * @param locale 语种
   * @param callback 回调函数,用于订制自己触发的渲染逻辑
   */
  update(locale: string, callback: Function) {
    let staticData = this.staticTranslateData[locale];
    const cacheData = this.getCache(locale) || {};
    // 使用静态数据和缓存数据的并集,触发第一次视图更新
    merge(cacheData, staticData);
    callback(cacheData, 'first');

    // 返回静态和动态数据的合集
    return this.getMergeTranslateData(locale).then((res: object) => {
      // 获取数据是否和动态数据不一致
      if (res && !isEqual(res, cacheData)) {
        callback(res, 'second')
      }
    })
  }
}

复制代码

延伸

使用了上面的做法,已经很好的达到了预期效果。就在写这篇文章的时候,突然发现还有继续深入优化的方向:可以把动态数据划分不同的模块,分步加载。根据自身业务的逻辑,比如可以根据用户权限。当我用户权限低只可以看主页时,我只加载主页模块的翻译数据即可;当我用户权限高,并进入了相应页面,此时再去下载对应的模块数据。

总结

本次提供的优化方案思路并不难,只是实现起来需要些时间,我根据本次优化的思路造了个轮子,使用十分方便,内含使用demo和注释,欢迎star:github.com/jmx16449196…。如果觉得本文对你有所帮助,求点赞一下,谢谢~

更多前端技术分享请订阅微信公众号“前端技术干货分享圈”
文章分类
前端
文章标签