How can I manage to just load the language files I really need with vue-i18n?

Question

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.

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

You can see it in 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)
  }
)

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

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?

Are you using Vue CLI ? – Michal Levý Apr 20 '21 at 15:41 — Michal Levý, Apr 20 '21 at 15:41
Yes I do. Your answer is right! Thank you. – Janning Vygen Apr 21 '21 at 10:39 — Janning Vygen, Apr 21 '21 at 10:39

score 2 · Accepted Answer · answered Apr 20 '21 at 16:04

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's dynamic imports never load all the chunks mentioned above. That would defeat the purpose of the feature.

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

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() ).

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

How can I manage to just load the language files I really need with vue-i18n?

1 Answers1

Linked