Lazy load locales (#1362)

Closes #1345 

`index.js` size reduction: `538.71 KiB` -> `382.74 KiB`

Also sets correct html `lang` attribute.

web/src/compositions/useI18n.ts

@@ -1,14 +1,31 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import messages from '@intlify/vite-plugin-vue-i18n/messages';
+import { nextTick } from 'vue';
 import { createI18n } from 'vue-i18n';
 
 import { getUserLanguage } from '~/utils/locale';
 
+const userLanguage = getUserLanguage();
+const fallbackLocale = 'en';
 export const i18n = createI18n({
-  locale: getUserLanguage(),
+  locale: userLanguage,
   legacy: false,
   globalInjection: true,
-  fallbackLocale: 'en',
-  messages,
+  fallbackLocale,
 });
+
+export const loadLocaleMessages = async (locale: string) => {
+  const { default: messages } = await import(`~/assets/locales/${locale}.json`);
+
+  i18n.global.setLocaleMessage(locale, messages);
+
+  return nextTick();
+};
+
+export const setI18nLanguage = async (lang: string): Promise<void> => {
+  if (!i18n.global.availableLocales.includes(lang)) {
+    await loadLocaleMessages(lang);
+  }
+  i18n.global.locale.value = lang;
+};
+
+loadLocaleMessages(fallbackLocale);
+loadLocaleMessages(userLanguage);