diff --git a/web/src/i18n.ts b/web/src/i18n.ts
index f63d9d8a..14bf4b4f 100644
--- a/web/src/i18n.ts
+++ b/web/src/i18n.ts
@@ -1,6 +1,5 @@
-import i18n, { FallbackLng, FallbackLngObjList } from "i18next";
+import i18n, { BackendModule, FallbackLng, FallbackLngObjList } from "i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
-import toast from "react-hot-toast";
 import { initReactI18next } from "react-i18next";
 
 export const availableLocales = [
@@ -35,7 +34,21 @@ const fallbacks = {
   zh: ["zh-Hans", "en"],
 } as FallbackLngObjList;
 
+const LazyImportPlugin: BackendModule = {
+  type: "backend",
+  init: function () {},
+  read: function (language, _, callback) {
+    if (fallbacks[language]) {
+      language = fallbacks[language][0];
+    }
+    import(`./locales/${language}.json`).then((translation: any) => {
+      callback(null, translation);
+    });
+  },
+};
+
 i18n
+  .use(LazyImportPlugin)
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
@@ -48,15 +61,5 @@ i18n
     } as FallbackLng,
   });
 
-for (const locale of availableLocales) {
-  import(`./locales/${locale}.json`)
-    .then((translation) => {
-      i18n.addResourceBundle(locale, "translation", translation.default, true, true);
-    })
-    .catch((err) => {
-      toast.error(`Failed to load locale "${locale}".\n${err}`, { duration: 5000 });
-    });
-}
-
 export default i18n;
 export type TLocale = (typeof availableLocales)[number];