feat: improve language file loading performance

simonwep · Nov 1, 2024 · 90c5ed9 · 90c5ed9
1 parent 66e0f95
commit 90c5ed9
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 32 deletions.
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
@@ -1,20 +1,22 @@
-import { watchEffect } from 'vue';
 import { createI18n, IntlNumberFormat } from 'vue-i18n';
-import de from './locales/de.json';
-import en from './locales/en.json';
-import br from './locales/pt-br.json';
-import tr from './locales/tr.json';
-import cz from './locales/cz.json';
+import type en from './locales/en.json';
+
+const imports: Record<string, () => Promise<{ default: string }>> = {
+  cze: () => import('./locales/cze.json?raw'),
+  en: () => import('./locales/en.json?raw'),
+  de: () => import('./locales/de.json?raw'),
+  tr: () => import('./locales/tr.json?raw'),
+  'pt-br': () => import('./locales/pt-br.json?raw')
+} as const;
 
 export type MessageSchema = typeof en;
 
 const browserLocale = navigator.language.slice(0, 2).toLowerCase();
-const messages: Record<string, MessageSchema> = { en, de, br, tr, cz } as const;
 
-export const availableLocales = Object.keys(messages);
+export const availableLocales = Object.keys(imports);
 export const initialLocale = availableLocales.includes(browserLocale) ? browserLocale : 'en';
 
-export type AvailableLocale = keyof typeof messages;
+export type AvailableLocale = keyof typeof imports;
 
 const numberFormats: IntlNumberFormat = {
   currency: {
@@ -27,16 +29,19 @@ const numberFormats: IntlNumberFormat = {
   }
 };
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 export const i18n = createI18n({
   legacy: false,
-  fallbackLocale: 'en',
-  locale: initialLocale,
-  messages: messages as any,
-  numberFormats: Object.fromEntries(availableLocales.map((locale) => [locale, numberFormats]))
+  locale: initialLocale
 });
 
-// Synchronize the i18n locale with the browser locale
-watchEffect(() => {
-  document.documentElement.lang = i18n.global.locale.value;
-});
+export const changeLocale = async (locale: AvailableLocale, currency?: Intl.NumberFormatOptions) => {
+  const messages = JSON.parse((await imports[locale]()).default);
+  const numberFormat: IntlNumberFormat = { ...numberFormats, currency: { ...numberFormats.currency, ...currency } };
+
+  document.documentElement.lang = locale;
+  i18n.global.setLocaleMessage(locale, messages);
+  i18n.global.setNumberFormat(locale, numberFormat);
+  i18n.global.locale.value = locale;
+};
+
+await changeLocale(browserLocale);
diff --git a/src/store/state/index.ts b/src/store/state/index.ts
@@ -1,5 +1,5 @@
 import { useStateHistory, useTime } from '@composables';
-import { AvailableLocale, i18n } from '@i18n/index';
+import { AvailableLocale, changeLocale, i18n } from '@i18n/index';
 import { Storage } from '@storage/index';
 import { moveInArrays, readFile, remove, uuid } from '@utils';
 import { DeepReadonly, inject, reactive, readonly, ShallowRef, shallowRef, watch, watchEffect } from 'vue';
@@ -94,20 +94,9 @@ export const createDataStore = (storage?: Storage): Store => {
     return [...currentYear.expenses, ...currentYear.income];
   };
 
-  watchEffect(() => {
-    for (const locale of i18n.global.availableLocales) {
-      const formats = i18n.global.getNumberFormat(locale);
-
-      i18n.global.setNumberFormat(locale, {
-        ...formats,
-        currency: { ...formats.currency, currency: state.currency }
-      });
-    }
-  });
-
   watch(
-    () => state.locale,
-    (locale) => (i18n.global.locale.value = locale)
+    () => [state.locale, state.currency],
+    ([locale, currency]) => changeLocale(locale, { currency })
   );
 
   storage?.sync<DataState, DataState | DataStateV1>({

diff --git a/vite.config.ts b/vite.config.ts
@@ -30,6 +30,9 @@ export default defineConfig({
       '@styles': '/src/styles'
     }
   },
+  build: {
+    target: 'ES2022'
+  },
   plugins: [
     tsconfigPaths({ loose: true }),
     optimizeCssModules(),