javascript - 我怎样才能设法用 vue-i18n 加载我真正需要的语言文件？

Question

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

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

你可以在full glory in the docs中看到它

// 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)
  }
)

所以它使用dynamic imports, a webpack feature .来自文档:

For example, import(./locale/${language}.json) will cause every .json file in the ./locale directory to be bundled into the new chunk. At run time, when the variable language has been computed, any file like english.json or german.json will be available for consumption.

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

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

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

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

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

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

Answer 1

For example, import(./locale/${language}.json) will cause every .json file in the ./locale directory to be bundled into the new chunk. At run time, when the variable language has been computed, any file like english.json or german.json will be available for consumption.

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

因为我过去遇到过类似的问题，所以我猜测您使用的是 Vue CLI，而问题实际上出在 CLI 的 Prefetch feature 中。

By default, a Vue CLI app will automatically generate prefetch hints for all JavaScript files generated for async chunks (as a result of on-demand code splitting via dynamic 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
    })
  }
}