Vue.js vue-i18n延迟加载正在加载所有区域设置

我正在尝试为vue-i18n实现延迟加载，我遵循的是来自的说明

但进口的表现与我预期的不同。我希望它仅在调用时加载文件，但当页面刷新时，它将下载与模式“@i18n/messages/*.js”匹配的所有文件，即使没有执行导入。代码中存在该行的事实足以加载所有捆绑包

import(/* webpackChunkName: "lang-[request]" */ `@/i18n/messages/${lang}.js`)

我错过了什么

---

我正在使用vue cli。

我无法指示webpack使用文档中的语法分别打包每个文件，但发现以下解决方法并不理想，但适合我

我将替换文档中的loadLanguageAsync（lang）方法：

导出函数loadLanguageAsync（lang）{ //如果是同一种语言 if（i18n.locale===lang）{ 返回承诺。解析（setI18nLanguage（lang）） } //如果语言已加载 if（loadedLanguages.includes（lang））{ 返回承诺。解析（setI18nLanguage（lang）） } //如果语言尚未加载 返回导入（/*webpackChunkName:“lang-[request]”*/`@/i18n/messages/${lang}.js`）( 消息=>{ i18n.setLocaleMessage（lang，messages.default） loadedLanguages.push（lang） 返回设置18NLanguage（lang） } ) 关于这一点：

导出异步函数loadLanguageAsync（lang）{ //如果是同一种语言 if（i18n.locale===lang）{ 返回承诺。解析（setI18nLanguage（lang）） } //如果语言已加载 if（loadedLanguages.includes（lang））{ 返回承诺。解析（setI18nLanguage（lang）） } //如果语言尚未加载 让消息=null； 交换机（lang）{ 案例“en”： messages=等待导入（/*webpackChunkName:“i18n-en”*/`@/i18n/messages/en.js`） 打破 案例“fr”： messages=wait import（/*webpackChunkName:“i18n fr”*/`@/i18n/messages/fr.js`） 打破 案例“de”： messages=wait import（/*webpackChunkName:“i18n de”*/`@/i18n/messages/de.js`） 打破 } 如果（消息！=null）{ i18n.setLocaleMessage（lang，messages.default） loadedLanguages.push（lang） 返回设置18NLanguage（lang） } }

---

因为这个问题困扰了我一段时间，我现在刚刚解决了这个问题，这是我的延迟加载解决方案（使用vue和typescript），从4.5-7MB增加到2.6MB。我延迟加载并且不预取这些语言

vue.config.js

。。。
链接网页包：配置=>{
//删除预取插件
//config.plugins.delete（“预取”）；
//或：
//修改其选项：
config.plugin（“预取”）.tap（选项=>{
选项[0]。文件黑名单=选项[0]。文件黑名单| |[]；
选项[0]。文件黑名单。推送（/lang（+？\.js$/）；
选项[0]。文件黑名单。推送（/lang（+？\.js.map$/）；
返回选项；
});
},
...

i18n.ts

从“Vue”导入Vue；
从“vue-i18n”导入VueI18n；
从“@/types/languages”导入{LanguageList}；
从“@/locales/en_US.json”导入消息；
Vue.use（VueI18n）；
导出常量i18n=新VueI18n({
区域设置：
process.env.VUE_APP_I18N_区域设置||
“恩_US”，
silentTranslationWarn：对，
fallbackLocale:process.env.VUE_APP_I18N_FALLBACK_LOCALE | | |“en_US”，
消息：{en_US:messages}
});
const loadedLanguages=[“en_US”]；//预加载的默认语言
导出函数setI18nLanguage（lang:string，load=true）{
如果（加载）{
/*eslint在定义之前禁用@typescript eslint/no use*/
loadLanguageAsync（lang）。然后（（）=>{
还郎；
});
}否则{
i18n.locale=lang；
//axios.defaults.headers.common['Accept-Language']=lang
（document.querySelector（“html”）作为HTMLElement.setAttribute（“lang”，lang）；
还郎；
}
}
导出函数loadLanguageAsync（lang:string）{
如果(
i18n.locale！==lang||
（！loadedLanguages.includes（lang）和&LanguageList.find（l=>l.code==lang））
) {
如果（！loadedLanguages.includes（lang））{
退货进口(
/*webpackChunkName:“lang-[request]”*/`@/locales/${lang}`
)。然后（msgs=>{
调试器；
console.log（msgs.default）；
i18n.设置本地消息（lang、msgs）；
loadedLanguages.push（lang）；
返回seti18n语言（lang）；
});
}
返回承诺。解析（setI18nLanguage（lang，false））；
}
返回承诺。解析（setI18nLanguage（lang，false））；
}

App.vue

从“@/i18n”导入{setI18nLanguage}；
...
beforeMount（）{
SETI18N语言（i18n.locale）；
}
...

梅因酒店

。。。
从“@/i18n”导入{i18n}”；
...
新Vue({
路由器，
商店，
i18n，
渲染：h=>h（应用程序）
}).$mount（“#app”）；

语言

导出接口语言i{
代码：字符串；
语言：字符串；
中文：字符串；
}
导出常量语言列表：LanguageI[]=[
{代码：“en_US”，语言：“English”，英语：“English”}，
//...
];

你运气好吗？我也一样issue@tom_h我没有找到如何修复它，但找到了一个解决方法。请参阅我的答案。谢谢，这确实有效。仅供参考，这似乎与webpackChunkName选项有关，删除它对我来说确实有效，但随后你就失去了重命名i18n块的能力。这对我来说不是一个交易破坏者，而是一个有点烦人。这真是太神奇了，谢谢。我需要禁用预取的唯一一点就是在我的动态导入中添加一个以

lang

开头的chunkName，并在

options[0]行中添加一行。文件黑名单。推送（/lang*/）；

将所有此类块列入黑名单。干杯！