i18n: aync load lang file

package-lock.json

@@ -15,6 +15,7 @@
         "events": "^3.3.0",
         "i18next": "^23.11.5",
         "i18next-browser-languagedetector": "^8.0.0",
+        "i18next-resources-to-backend": "^1.2.1",
         "idb": "^7.1.1",
         "idb-open-plus": "^1.0.0",
         "jsonc-parser": "^3.2.0",
@@ -2860,6 +2861,14 @@
         "@babel/runtime": "^7.23.2"
       }
     },
+    "node_modules/i18next-resources-to-backend": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmmirror.com/i18next-resources-to-backend/-/i18next-resources-to-backend-1.2.1.tgz",
+      "integrity": "sha512-okHbVA+HZ7n1/76MsfhPqDou0fptl2dAlhRDu2ideXloRRduzHsqDOznJBef+R3DFZnbvWoBW+KxJ7fnFjd6Yw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/idb": {
       "version": "7.1.1",
       "resolved": "https://registry.npmmirror.com/idb/-/idb-7.1.1.tgz",

package.json

@@ -24,6 +24,7 @@
     "events": "^3.3.0",
     "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-resources-to-backend": "^1.2.1",
     "idb": "^7.1.1",
     "idb-open-plus": "^1.0.0",
     "jsonc-parser": "^3.2.0",

src/components/Language.tsx

@@ -1,17 +1,25 @@
 import { Button, ButtonProps } from "antd";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 export const LanguageButton = (props: ButtonProps) => {
   const { i18n } = useTranslation();
+  const [isLoading, setLoading] = useState(false);
+  (window as any).i18n = i18n;
   return (
     <Button
+      loading={isLoading}
       shape="circle"
       {...props}
       onClick={() => {
-        i18n.changeLanguage(i18n.resolvedLanguage === "en" ? "zh" : "en");
+        setLoading(true);
+        i18n
+          .changeLanguage(i18n.resolvedLanguage === "en" ? "zh-cn" : "en")
+          // .then(()=>console.log('changeLanguage ok'), (err) => console.error(err))
+          .finally(() => setLoading(false));
       }}
     >
-      {i18n.resolvedLanguage === "en" ? "中" : "En"}
+      {isLoading ? "" : i18n.resolvedLanguage === "en" ? "中" : "En"}
     </Button>
   );
 };

src/uitls/i18n.ts

@@ -1,11 +1,9 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
+import resourcesToBackend from "i18next-resources-to-backend";
 import { isValidElement } from "react";
-import en from '../i18n/en.json';
-import zh from '../i18n/zh.json';
-// const en = await import("../i18n/en.json");
-// const zh = await import("../i18n/zh.json");
+
 const fallbackLng = "en";
 i18n
   // 检测用户当前使用的语言
@@ -13,18 +11,18 @@ i18n
   .use(LanguageDetector)
   // 注入 react-i18next 实例
   .use(initReactI18next)
+  // 动态加载语言包
+  .use(
+    resourcesToBackend((language:string, namespace:string) => import(`../i18n/${language}.json`))
+  )
   // 初始化 i18next
   // 配置参数的文档: https://www.i18next.com/overview/configuration-options
   .init({
-    debug: true,
+    debug: import.meta.env.DEV,
     fallbackLng: fallbackLng,
     interpolation: {
       escapeValue: false,
     },
-    resources: {
-      en: { translation: en },
-      zh: { translation: zh },
-    },
   });
 
 export function getLabel(label: string | { [key: string]: string }) {