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

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

所以 vue.i18n 似乎支持延迟加载。或者确实如此？

你可以在文档中充满荣耀 https://kazupon.github.io/vue-i18n/guide/lazy-loading.html

// 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 的一项功能 https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import。来自文档：

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

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

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

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

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

但又来了。所有语言文件均已加载。

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

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

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

由于我过去遇到过类似的问题，我的猜测是您正在使用 Vue CLI，而问题实际上出在 CLI 中预取功能 https://cli.vuejs.org/guide/html-and-static-assets.html#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
    })
  }
}