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

Question

使用 vue-i18n 很容易翻译您的 Vue.js 应用程序。 但是随着项目的增长，您不想加载所有语言的所有消息。 大多数用户从不切换语言。 我们对每种语言都有单独的域，并且切换语言极为罕见。

所以 vue.i18n 似乎支持延迟加载。 或者是吗？

您可以在文档中看到它的全部荣耀

// If the language hasn't been loaded yet
return import(/* webpackChunkName: "lang-[request]" */ `@/i18n/messages/${lang}.js`).then(
  messages => {
    i18n.setLocaleMessage(lang, messages.default)
    loadedLanguages.push(lang)
    return setI18nLanguage(lang)
  }
)

所以它使用动态导入，一个 webpack 特性。 从文档：

例如，import( ./locale/${language}.json ) 将导致 ./locale 目录中的每个.json 文件捆绑到新块中。 在运行时，当变量语言被计算出来时，任何像english.json或german.json这样的文件都可以使用。

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

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

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

 i18n: {
        messages: {
            'en': require('~/locales/en_button.json'),
            'fr': require('~/locales/fr_button.json')
        }
    },

但又一次。 加载所有语言文件。

我怎样才能设法只加载我真正需要的语言文件？

Answer 1

例如， import(./locale/${language}.json)将导致 ./locale 目录中的每个.json 文件捆绑到新块中。 在运行时，当变量语言被计算出来时，任何像english.json或german.json这样的文件都可以使用。

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

正如我过去遇到的类似问题，我的猜测是您使用的是 Vue CLI，而问题实际上出在 CLI 的Prefetch 功能中

默认情况下，Vue CLI 应用程序将自动为为异步块生成的所有 JavaScript 文件生成预取提示（作为通过动态import()按需代码拆分的结果）。

您可以通过在生产模式下构建您的应用程序并检查生成的index.html来确认这一点

这是否是一个好的默认行为是有争议的，但幸运的是它并不难改变：

// vue.config.js
module.exports = {
  chainWebpack: config => {

    config.plugin('prefetch').tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || []
      options[0].fileBlacklist.push(/lang-.+\.js$/)
      return options
    })
  }
}