How Can I Manage To Just Load The Language Files I Really Need With Vue-i18n?

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.

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