vue2升級vue3：vue-i18n國際化非同步按需載入

zhoulujun發表於2023-03-18
Vue非同步

vue2非同步載入之前說過，vue3還是之前的方法，只是把 i18n.setLocaleMessage改為i18n.global.setLocaleMessage

但是本文還是詳細說一遍：

為什麼需要非同步載入語言包

主要還是縮小提程式碼包，沒有按需載入前，語言包內容太多

a.jpg

好幾螢幕全部是，雖然從webpack-analysis 看圖裡面佔比可以忽略不計

按語言非同步載入語言包

一次載入所有翻譯檔案是過度和不必要的。

因為可能一直用中文，那麼就不會用到英文的資料,就沒必要去載入。只在請求的時候去載入它

改動前程式碼

import { createI18n } from 'vue-i18n';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import cookies from '@/utils/cookies';
import chineseJson from '../lang/zh-cn.json';
import englishJson from '../lang/en.json';
//****n
const currentLang = cookies.get('blueking_language') || 'zh-cn';
if (currentLang === 'en') {
  dayjs.locale('en');
} else {
  dayjs.locale('zh-cn');
}
const i18n = createI18n({
  locale: currentLang,
  fallbackLocale: 'zh-cn', // 設定備用語言
  silentFallbackWarn: true,
  silentTranslationWarn: true,
  globalInjection: true,
  allowComposition: true,
  messages: {
    en: { ...englishJson },
    'zh-cn': { ...chineseJson },
    //****n
  },
});
export default i18n;

這個檔案n多，堆疊起來體積也不少

改動後

import { createI18n } from 'vue-i18n';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import cookies from '@/utils/cookies';
// import chineseJson from '../lang/zh-cn.json';
// import englishJson from '../lang/en.json';
export type LangType = 'zh-cn'|'en';
const currentLang: LangType = cookies.get('blueking_language') as LangType || 'zh-cn';
// 初始化載入fallbackLocale 語言包，但是圖表平臺首先載入框架，無需放到框架裡面去載入
/* const messages = {
  // en: { ...englishJson },
  'zh-cn': { ...chineseJson },
};*/
const i18n = createI18n({
  locale: currentLang,
  fallbackLocale: 'zh-cn', // 設定備用語言
  silentFallbackWarn: true,
  silentTranslationWarn: true,
  globalInjection: true,
  allowComposition: true,
  // messages,
});

export  function changLang(langs: LangType) {
  if (currentLang === 'en') {
    dayjs.locale('en');
  } else {
    dayjs.locale('zh-cn');
  }
  cookies.set('blueking_language', langs);
  loadLanguageAsync(langs);
  // window.location.reload();
}
export function setI18nLanguage(lang: LangType) {
  i18n.global.locale = lang;
  return lang;
}
export function loadLanguageAsync(lang: LangType) {
  return import(/* webpackChunkName: "lang-request" */`../lang/${lang}.json`).then((langfile) => { // 動態載入對應的語言包
    i18n.global.setLocaleMessage(lang, langfile);
    return setI18nLanguage(lang);   // 返回並且設定
  });
}
changLang(currentLang);
export default i18n;

這樣就可以了

注意事項

  • 由於是非同步載入，比如初始化只載入 fallbackLocale ，程式碼中註釋的部分

  • vue3使用vue-i18n 9.x ,相關方法在i18n.global.xxx

但是這個載入包還是有些打，需要進一步拆分

按模組或路由載入語言包

這個最佳化有很多措施

拆分模組

之前的語言包全部是在一個json檔案裡面。第一個，json無法tree-shake 樹搖 掉不用程式碼。

如果是ts，首先第一個按頁面、功能 分成一個個 物件。雖然不用tree-shake。

但是可以透過組合得到不同的js。

然後在路由鉤子裡面，按需注入。loadLanguageAsync

 

 

 

 

參考文章：

vueI18n 多語言檔案按需載入：https://blog.csdn.net/yujin0213/article/details/119137798

vue 多語言 vue-i18n 按需載入，非同步呼叫 https://www.cnblogs.com/chenyi4/p/12409074.html

十分鐘入門前端最佳的語言國際化方案 https://zhuanlan.zhihu.com/p/144717545

 


轉載本站文章《vue2升級vue3：vue-i18n國際化非同步按需載入》,
請註明出處：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8930.html

相關文章