vueI18n 多语言文件按需加载

• 前言
• 具体改动点
• • 一、增加异步加载语言包函数
  • • 改动前
    • 改动后
  • 二、在项目入口文件处调用异步加载语言包函数
  • • 优化后效果
    • 上线后效果
    • • 优化前
      • 优化后
• 参考

前言

在对国际化H5项目打包分析发现，所有语言文件均被打到了app.js入口文件里，这就导致app.js文件体积庞大，目前项目里存在zh-CN、en-US、es-MX、es-419、pt-BR、ja-JP等六种语言包，未来还有可能新增更多的语言文件。当前项目里每个语言文件的体积大概是100多kb，加起来将近800k的体积，如果有新增的语言，体积还会更大。

使用webpack-bundle-analyzer分析打包后的结果，可以看到，所有语言文件都被入口文件所引用。

针对目前团队的移动端项目而言，H5页面没有切换语言的入口，用户不管是在端内还是在端外打开，页面初始化完成后都只会展示一种语言，所以可以直接按url上的语言参数来加载对应的语言文件

具体改动点

一、增加异步加载语言包函数

改动前

src/i18n/locale.js，之前设置messages是通过定义所有语言，引入对应的语言包的形式

import zhCN from './zh-CN'
import enUS from './en-US'
import ptBR from './pt-BR'
import jaJP from './ja-JP'
import esMX from './es-MX'
import es419 from './es-419'export default new VueI18n({locale: getLanguageLong(), // 设置地区formatter: new CustomFormatter(), // 适配I18N翻译平台占位符 {{variable}}messages: {'en-US': enUS,'zh-CN': zhCN,'pt-BR': ptBR,'es-MX': esMX,'ja-JP': jaJP,'es-419': es419},
})

改动后

动态加载设置的语言文件，并设置VueI18n对象的messages

export const i18n = new VueI18n({locale: defaultLang,formatter: new CustomFormatter(), // 适配I18N翻译平台占位符 {{variable}}
});function setI18nLanguage(lang){i18n.locale = lang;return lang
}export function loadLanguageAsync (lang) {return import(/* webpackChunkName: "lang-[request]" */`@/i18n/${lang}`).then(langfile => { //动态加载对应的语言包let langFile = langfile.default;i18n.setLocaleMessage(lang, langFile);return setI18nLanguage(lang);   //返回并且设置});
}

二、在项目入口文件处调用异步加载语言包函数

src/App.vue，页面初始化前加载对应的语言文件（lang值为URL path上的语言码）

async created() {//页面初始化前需要先获取国家配置及语言包Promise.all([this.countryUtil.getCodeAsync(), loadLanguageAsync(lang)]).then((arr) => {this.countryUtil.updateCode(arr[0]);this.inited = true});this.countryUtil.setApp(this);},

优化后效果

可以看到语言文件被打包成了一个个小的chunk，没有全部被打进app.js

按需加载之后，app.js体积小了不少，打包之后对比可以看出，入口文件的体积减少约33%

上线后效果

优化前

优化后

参考

https://www.cnblogs.com/chenyi4/p/12409074.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！