title: How can I manage to just load the language files I really need with vue-i18n?
body: <p>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.</p>
  <p>So vue.i18n seems to support lazy-loading. Or does it?</p>
  <p>You can see it in <a href="https://kazupon.github.io/vue-i18n/guide/lazy-loading.html" rel="nofollow noreferrer">full glory in the docs</a></p>
  <pre class="lang-js prettyprint-override"><code>// If the language hasn't been loaded yet
  return import(/* webpackChunkName: &quot;lang-[request]&quot; */ `@/i18n/messages/${lang}.js`).then(
    messages =&gt; {
      i18n.setLocaleMessage(lang, messages.default)
      loadedLanguages.push(lang)
      return setI18nLanguage(lang)
    }
  )
  </code></pre>
  <p>So it uses <a href="https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import" rel="nofollow noreferrer">dynamic imports, a webpack feature</a>. From the docs:</p>
  <blockquote>
  <p>For example, import(<code>./locale/${language}.json</code>) 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.</p>
  </blockquote>
  <p>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?</p>
  <p>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.</p>
  <p>So I tried to use the component based approach</p>
  <pre class="lang-js prettyprint-override"><code> i18n: {
          messages: {
              'en': require('~/locales/en_button.json'),
              'fr': require('~/locales/fr_button.json')
          }
      },
  </code></pre>
  <p>But again. All language files are loaded.</p>
  <p>How can I manage to just load the language files I really need?</p>