如何使用 vue-i18n 加载我真正需要的语言文件? [英] How can I manage to just load the language files I really need with vue-i18n?

问题描述

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

With vue-i18n it is pretty easy to translate your Vue.js App. But as your project grows you don't want to load ALL messages in ALL languages. Most users never switch the language. We have separate domains for each language and switching the language is extremely rare.

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

So vue.i18n seems to support lazy-loading. Or does it?

您可以在完整的文档中看到它

// 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特性.来自文档:

So it uses dynamic imports, a webpack feature. From the docs:

例如 import(./locale/${language}.json) 将导致每个./locale 目录中的 .json 文件被捆绑到新块中.在运行时，当变量语言被计算出来后，任何文件如 english.json 或 German.json 将可供消费.

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.

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

So ALL language files are loaded. For me this is a waste of bandwidth. Of course you can have a default language preloaded and hope most users are using the default language, so you don't use this at all. But isn't it stupid to load all english messages as default even if the user doesn't want to see the app in english?

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

Second: The recommended approach is to put all translations into one language file. This is a waste of bandwidth, too. A huge application has tenthousands of words, most of them are never needed or only if you navigate to all routes. Most users won't do this.

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

So I tried to use the component based approach

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

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

But again. All language files are loaded.

如何才能加载我真正需要的语言文件?

How can I manage to just load the language files I really need?

推荐答案

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

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 的动态导入永远不会加载上面提到的所有块.这将违背该功能的目的.

Webpack's dynamic imports never load all the chunks mentioned above. That would defeat the purpose of the feature.

由于我过去遇到过类似的问题，我的猜测是您使用的是 Vue CLI 而问题实际上出在 CLI 的 预取功能

As I encountered similar problem in the past my guess is that you are using Vue CLI and the problem is in fact in CLI's Prefetch feature

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

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

You can confirm that by building your app in production mode and check the generated index.html

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

It is arguable whether this is a good default behavior but luckily it is not that hard to change:

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

这篇关于如何使用 vue-i18n 加载我真正需要的语言文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！