Javascript 如何使用vue-i18n加载我真正需要的语言文件？

使用vue-i18n，翻译vue.js应用程序非常容易。但随着项目的发展，您不希望加载所有语言的所有消息。大多数用户从不切换语言。我们对每种语言都有单独的域，切换语言的情况极为罕见

因此vue.i18n似乎支持延迟加载。还是这样

你可以从中看到它

//如果语言尚未加载
返回导入（/*webpackChunkName:“lang-[request]”*/`@/i18n/messages/${lang}.js`）(
消息=>{
i18n.setLocaleMessage（lang，messages.default）
loadedLanguages.push（lang）
返回设置18NLanguage（lang）
}
)

所以它使用。从文档中：

例如，导入（

/locale/${language}.json

）将导致 .json文件绑定到新块中。 在运行时，当计算变量语言时，任何文件 如english.json或german.json将可供消费

因此，所有语言文件都已加载。对我来说，这是对带宽的浪费。当然，您可以预先加载默认语言，并希望大多数用户都使用默认语言，所以您根本不使用这种语言。但是，即使用户不想看到英文版的应用程序，也默认加载所有英文邮件，这不是很愚蠢吗

第二：推荐的方法是将所有翻译放在一个语言文件中。这也是对带宽的浪费。一个庞大的应用程序有成千上万的单词，其中大部分是不需要的，或者只有当你导航到所有路线时才需要。大多数用户不会这样做

所以我尝试使用基于组件的方法

i18n:{
信息：{
“en”：需要（“~/locales/en_button.json”），
“fr”：需要（“~/locales/fr_button.json”）
}
},

但是再一次。所有语言文件都已加载

我怎样才能加载我真正需要的语言文件呢

例如，

import（./locale/${language}.json）

将使./locale目录中的每个.json文件绑定到新块中。在运行时，当计算变量语言时，任何文件（如english.json或derman.json）都可以使用

Webpack的动态导入不会加载上面提到的所有块。这将破坏该功能的目的

由于我在过去遇到过类似的问题，我猜您正在使用Vue CLI，而问题实际上在CLI中

默认情况下，Vue CLI应用程序将自动为为异步块生成的所有JavaScript文件生成预回迁提示（这是通过动态

import（）

按需拆分代码的结果）

您可以通过在生产模式下构建应用程序并检查生成的

index.html

这是否是一种良好的默认行为尚存在争议，但幸运的是，改变并不难：

//vue.config.js
module.exports={
链接网页包：配置=>{
config.plugin（'prefetch'）。点击（选项=>{
选项[0]。文件黑名单=选项[0]。文件黑名单| |[]
选项[0]。文件黑名单。推送（/lang-.+\.js$/）
返回选项
})
}
}

您正在使用Vue CLI吗？是的，我正在使用。你的回答是对的！非常感谢。