vue-i18n lazy loading загружает все языковые стандарты

Я не смог проинструктировать webpack упаковывать каждый файл индивидуально, используя синтаксис из документации, но нашел следующий обходной путь, который не идеален, но работает для меня.

Я заменяю метод loadLanguageAsync (lang) из документации:

export function loadLanguageAsync(lang) {
    // If the same language
    if (i18n.locale === lang) {
        return Promise.resolve(setI18nLanguage(lang))
    }

    // If the language was already loaded
    if (loadedLanguages.includes(lang)) {
        return Promise.resolve(setI18nLanguage(lang))
    }

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

С этим:

export async function loadLanguageAsync(lang) {
    // If the same language
    if (i18n.locale === lang) {
        return Promise.resolve(setI18nLanguage(lang))
    }

    // If the language was already loaded
    if (loadedLanguages.includes(lang)) {
        return Promise.resolve(setI18nLanguage(lang))
    }

    // If the language hasn't been loaded yet
    let messages = null;
    switch (lang) {
        case 'en':
            messages = await import(/* webpackChunkName: "i18n-en" */ `@/i18n/messages/en.js`)
            break;
        case 'fr':
            messages = await import(/* webpackChunkName: "i18n-fr" */ `@/i18n/messages/fr.js`)
            break;
        case 'de':
            messages = await import(/* webpackChunkName: "i18n-de" */ `@/i18n/messages/de.js`)
            break;
    }
    if (messages != null) {
        i18n.setLocaleMessage(lang, messages.default)
        loadedLanguages.push(lang)
        return setI18nLanguage(lang)
    }
}

Поскольку это меня некоторое время беспокоило, и теперь я только что решил это, вот мое решение для отложенной загрузки (с использованием vue и typescript). . Пошла с 4,5 - 7 мб до 2,6 мб. Я загружаю "лениво" и не выполняю предварительную загрузку языков.

vue.config.js

   ...
   chainWebpack: config => {
    // remove the prefetch plugin
    // config.plugins.delete("prefetch");

    // or:
    // modify its options:
    config.plugin("prefetch").tap(options => {
      options[0].fileBlacklist = options[0].fileBlacklist || [];
      options[0].fileBlacklist.push(/lang(.)+?\.js$/);
      options[0].fileBlacklist.push(/lang(.)+?\.js.map$/);
      return options;
    });
  },
  ...

i18n.ts

import Vue from "vue";
import VueI18n from "vue-i18n";
import { LanguageList } from "@/types/languages";

import messages from "@/locales/en_US.json";

Vue.use(VueI18n);

export const i18n = new VueI18n({
  locale:
    process.env.VUE_APP_I18N_LOCALE ||
    "en_US",
  silentTranslationWarn: true,
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en_US",
  messages: { en_US: messages }
});

const loadedLanguages = ["en_US"]; // our default language that is preloaded

export function setI18nLanguage(lang: string, load = true) {
  if (load) {
    /* eslint-disable @typescript-eslint/no-use-before-define */
    loadLanguageAsync(lang).then(() => {
      return lang;
    });
  } else {
    i18n.locale = lang;
    // axios.defaults.headers.common['Accept-Language'] = lang
    (document.querySelector("html") as HTMLElement).setAttribute("lang", lang);
    return lang;
  }
}

export function loadLanguageAsync(lang: string) {
  if (
    i18n.locale !== lang ||
    (!loadedLanguages.includes(lang) && LanguageList.find(l => l.code == lang))
  ) {
    if (!loadedLanguages.includes(lang)) {
      return import(
        /* webpackChunkName: "lang-[request]" */ `@/locales/${lang}`
      ).then(msgs => {
        debugger;
        console.log(msgs.default);
        i18n.setLocaleMessage(lang, msgs);
        loadedLanguages.push(lang);
        return setI18nLanguage(lang);
      });
    }
    return Promise.resolve(setI18nLanguage(lang, false));
  }
  return Promise.resolve(setI18nLanguage(lang, false));
}

App.vue

<script>
import {setI18nLanguage } from "@/i18n";
...
beforeMount() {
   setI18nLanguage(i18n.locale);
}
...
</script>

main.ts

...
import { i18n } from "@/i18n";
...

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount("#app");

languages.ts

export interface LanguageI {
  code: string;
  language: string;
  english: string;
}

export const LanguageList: LanguageI[] = [
  { code: "en_US", language: "English", english: "English" },
//...
];