vue2异步加载之前说过，vue3还是之前的方法，只是把 i18n.setLocaleMessage改为i18n.global.setLocaleMessage
但是本文还是详细说一遍：
为什么需要异步加载语言包
主要还是缩小提代码包，没有按需加载前，语言包内容太多
好几屏幕全部是，虽然从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
