前言
在对国际化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