⚡️ perf: use dynamic locale to reduce bundle size (lobehub#752)

* ⚡️ perf: refactor to use dynamic locale

* ⚡️ perf: refactor to use dynamic locale

* ♻️ refactor: refactor the locale code

.i18nrc.js

@@ -1,20 +1,20 @@
 const { defineConfig } = require('@lobehub/i18n-cli');
 
 module.exports = defineConfig({
-  entry: 'locales/zh_CN',
-  entryLocale: 'zh_CN',
+  entry: 'locales/zh-CN',
+  entryLocale: 'zh-CN',
   output: 'locales',
   outputLocales: [
-    'zh_TW',
-    'en_US',
-    'ru_RU',
-    'ja_JP',
-    'ko_KR',
-    'fr_FR',
-    'tr_TR',
-    'es_ES',
-    'pt_BR',
-    'de_DE',
+    'zh-TW',
+    'en-US',
+    'ru-RU',
+    'ja-JP',
+    'ko-KR',
+    'fr-FR',
+    'tr-TR',
+    'es-ES',
+    'pt-BR',
+    'de-DE',
   ],
   temperature: 0,
   modelName: 'gpt-3.5-turbo-1106',

locales/ru_RU/setting.json → locales/ru-RU/setting.json

@@ -303,4 +303,4 @@
     },
     "title": "Дополнительные инструменты"
   }
-    }
+}

scripts/i18nWorkflow/const.ts

@@ -13,7 +13,6 @@ export const entryLocaleJsonFilepath = (file: string) =>
   resolve(localesDir, i18nConfig.entryLocale, file);
 export const outputLocaleJsonFilepath = (locale: string, file: string) =>
   resolve(localesDir, locale, file);
-export const srcLocalesResources = resolve(root, srcLocalesDir, 'resources');
-export const localesResourcesFilepath = (locale: string) => resolve(srcLocalesResources, locale);
+export const srcDefaultLocales = resolve(root, srcLocalesDir, 'default');
 
 export { default as i18nConfig } from '../../.i18nrc';

scripts/i18nWorkflow/genDefaultLocale.ts

@@ -1,13 +1,13 @@
 import { consola } from 'consola';
 import { colors } from 'consola/utils';
 
-import { entryLocaleJsonFilepath, i18nConfig, localesResourcesFilepath } from './const';
+import { entryLocaleJsonFilepath, i18nConfig, srcDefaultLocales } from './const';
 import { tagWhite, writeJSON } from './utils';
 
 export const genDefaultLocale = () => {
   consola.info(`Default locale is ${i18nConfig.entryLocale}...`);
 
-  const resources = require(localesResourcesFilepath(i18nConfig.entryLocale));
+  const resources = require(srcDefaultLocales);
   const data = Object.entries(resources.default);
   consola.start(`Generate default locale json, found ${data.length} namespaces...`);
 

scripts/i18nWorkflow/genDiff.ts

@@ -7,15 +7,15 @@ import { existsSync } from 'node:fs';
 import {
   entryLocaleJsonFilepath,
   i18nConfig,
-  localesResourcesFilepath,
   outputLocaleJsonFilepath,
+  srcDefaultLocales,
 } from './const';
 import { readJSON, tagWhite, writeJSON } from './utils';
 
 export const genDiff = () => {
   consola.start(`Diff between Dev/Prod local...`);
 
-  const resources = require(localesResourcesFilepath(i18nConfig.entryLocale));
+  const resources = require(srcDefaultLocales);
   const data = Object.entries(resources.default);
 
   for (const [ns, devJSON] of data) {

scripts/i18nWorkflow/index.ts

@@ -1,6 +1,5 @@
 import { genDefaultLocale } from './genDefaultLocale';
 import { genDiff } from './genDiff';
-import { genResources } from './genResources';
 import { split } from './utils';
 
 split('DIFF ANALYSIS');
@@ -9,7 +8,4 @@ genDiff();
 split('GENERATE DEFAULT LOCALE');
 genDefaultLocale();
 
-split('GENERATE RESOURCE & TOC');
-genResources();
-
 split('GENERATE I18N FILES');

scripts/i18nWorkflow/utils.ts

@@ -1,11 +1,9 @@
 import { consola } from 'consola';
 import { colors } from 'consola/utils';
-import { tocForResources } from 'i18next-resources-for-ts';
 import { readFileSync, writeFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 
 import i18nConfig from '../../.i18nrc';
-import { srcLocalesResources } from './const';
 
 export const readJSON = (filePath: string) => {
   const data = readFileSync(filePath, 'utf8');
@@ -48,15 +46,6 @@ export const genNamespaceList = (files: string[], locale: string) => {
   }));
 };
 
-export const genToc = (files: string[], locale: string) => {
-  const ns = genNamespaceList(files, locale);
-  let toc = tocForResources(ns, srcLocalesResources).replaceAll('\\', '/');
-  if (locale === i18nConfig.entryLocale) {
-    toc = toc.replaceAll('.json', '').replaceAll('../../../locales/zh_CN', '../default');
-  }
-  return toc;
-};
-
 export const tagBlue = (text: string) => colors.bgBlueBright(colors.black(` ${text} `));
 export const tagYellow = (text: string) => colors.bgYellowBright(colors.black(` ${text} `));
 export const tagGreen = (text: string) => colors.bgGreenBright(colors.black(` ${text} `));

src/locales/create.ts

@@ -1,43 +1,46 @@
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
+import resourcesToBackend from 'i18next-resources-to-backend';
 import { initReactI18next } from 'react-i18next';
 
 import { getClientConfig } from '@/config/client';
 import { DEFAULT_LANG, LOBE_LOCALE_COOKIE } from '@/const/locale';
 import { COOKIE_CACHE_DAYS } from '@/const/settings';
-import type { Namespaces } from '@/types/locale';
-import { isOnServerSide } from '@/utils/env';
-
-import { resources } from './options';
+import { isDev, isOnServerSide } from '@/utils/env';
 
 const { I18N_DEBUG, I18N_DEBUG_BROWSER, I18N_DEBUG_SERVER } = getClientConfig();
 const debugMode = I18N_DEBUG ?? isOnServerSide ? I18N_DEBUG_SERVER : I18N_DEBUG_BROWSER;
 
 export const createI18nNext = (lang?: string) => {
-  const ns: Namespaces[] = [
-    'error',
-    'common',
-    'empty',
-    'error',
-    'market',
-    'plugin',
-    'setting',
-    'welcome',
-  ];
+  const instance = i18n
+    .use(initReactI18next)
+    .use(LanguageDetector)
+    .use(
+      resourcesToBackend(async (lng: string, ns: string) => {
+        switch (lng) {
+          case 'zh-CN':
+          case 'zh': {
+            if (isDev) return import(`./default/${ns}`);
+
+            return import(`@/../locales/zh-CN/${ns}.json`);
+          }
 
-  const instance = i18n.use(initReactI18next).use(LanguageDetector);
-  //  not find a good way to handle suspense loading
-  // .use(
-  //   resourcesToBackend(
-  //     isDev ? resources : (lng: string, ns: string) => import(`../../locales/${lng}/${ns}.json`),
-  //   ),
-  // )
+          case 'en': {
+            return import(`@/../locales/en-US/${ns}.json`);
+          }
+
+          default: {
+            return import(`@/../locales/${lng}/${ns}.json`);
+          }
+        }
+      }),
+    );
 
   return {
     init: () =>
       instance.init({
         debug: debugMode,
-        defaultNS: ['error', 'common'],
+        defaultNS: ['error', 'common', 'empty'],
         detection: {
           caches: ['cookie'],
           cookieMinutes: 60 * 24 * COOKIE_CACHE_DAYS,
@@ -48,8 +51,6 @@ export const createI18nNext = (lang?: string) => {
           escapeValue: false,
         },
         lng: lang,
-        ns,
-        resources,
       }),
     instance,
   };

src/locales/default/index.ts

@@ -0,0 +1,23 @@
+import chat from './chat';
+import common from './common';
+import empty from './empty';
+import error from './error';
+import market from './market';
+import migration from './migration';
+import plugin from './plugin';
+import setting from './setting';
+import welcome from './welcome';
+
+const resources = {
+  chat,
+  common,
+  empty,
+  error,
+  market,
+  migration,
+  plugin,
+  setting,
+  welcome,
+} as const;
+
+export default resources;

src/locales/options.ts

@@ -1,6 +1,6 @@
 import type { Locales } from '@/types/locale';
 
-import _resources from './resources';
+import { locales } from './resources';
 
 type LocaleOptions = {
   label: string;
@@ -54,12 +54,4 @@ export const localeOptions: LocaleOptions = [
   },
 ] as LocaleOptions;
 
-export const supportLangs: string[] = localeOptions.map((i) => i.value);
-
-export const resources = {
-  ..._resources,
-  en: _resources['en-US'],
-  zh: _resources['zh-CN'],
-};
-
-export const supportLocales = Object.keys(resources);
+export const supportLocales: string[] = [...locales, 'en', 'zh'];

src/locales/resources.ts

@@ -0,0 +1,18 @@
+import resources from './default';
+
+export const locales = [
+  'de-DE',
+  'en-US',
+  'es-ES',
+  'fr-FR',
+  'ja-JP',
+  'ko-KR',
+  'pt-BR',
+  'ru-RU',
+  'tr-TR',
+  'zh-CN',
+  'zh-TW',
+] as const;
+
+export type DefaultResources = typeof resources;
+export type Locales = (typeof locales)[number];