perf: merge all namespace of i18n resource in prod

Signed-off-by: Innei <i@innei.in>

Author: Innei

configs/vite.render.config.ts

@@ -1,5 +1,5 @@
-import { readFileSync } from "node:fs"
-import { resolve } from "node:path"
+import fs, { readFileSync } from "node:fs"
+import path, { resolve } from "node:path"
 
 import * as babel from "@babel/core"
 import generate from "@babel/generator"
@@ -14,6 +14,51 @@ import { getGitHash } from "../scripts/lib"
 
 const pkg = JSON.parse(readFileSync("package.json", "utf8"))
 const isCI = process.env.CI === "true" || process.env.CI === "1"
+function localesPlugin(): Plugin {
+  return {
+    name: "locales-merge",
+    enforce: "post",
+    generateBundle(options, bundle) {
+      const localesDir = path.resolve(__dirname, "locales")
+      const namespaces = fs.readdirSync(localesDir)
+      const languageResources = {}
+
+      namespaces.forEach((namespace) => {
+        const namespacePath = path.join(localesDir, namespace)
+        const files = fs.readdirSync(namespacePath).filter((file) => file.endsWith(".json"))
+
+        files.forEach((file) => {
+          const lang = path.basename(file, ".json")
+          const filePath = path.join(namespacePath, file)
+          const content = JSON.parse(fs.readFileSync(filePath, "utf-8"))
+
+          if (!languageResources[lang]) {
+            languageResources[lang] = {}
+          }
+          languageResources[lang][namespace] = content
+        })
+      })
+
+      Object.entries(languageResources).forEach(([lang, resources]) => {
+        const fileName = `locales/${lang}.js`
+        const content = `export default ${JSON.stringify(resources)};`
+
+        this.emitFile({
+          type: "asset",
+          fileName,
+          source: content,
+        })
+      })
+
+      // Remove original JSON chunks
+      Object.keys(bundle).forEach((key) => {
+        if (key.startsWith("locales/") && key.endsWith(".json")) {
+          delete bundle[key]
+        }
+      })
+    },
+  }
+}
 
 export const viteRenderBaseConfig = {
   resolve: {
@@ -52,6 +97,7 @@ export const viteRenderBaseConfig = {
       },
     }),
 
+    localesPlugin(),
     viteTwToRawString(),
 
     {

src/renderer/src/i18n.ts

@@ -29,16 +29,7 @@ if (import.meta.hot) {
     async ({ file, content }: { file: string; content: string }) => {
       const resources = JSON.parse(content)
       const i18next = jotaiStore.get(i18nAtom)
-      // `file` is absolute path e.g. /Users/innei/git/follow/locales/en.json
-      // Absolute path e.g. /Users/innei/git/follow/locales/<module-name>/en.json
-
-      // 1. parse root language
-      // if (!file.includes("locales/namespaces")) {
-      //   const lang = file.split("/").pop()?.replace(".json", "")
-      //   if (!lang) return
-      //   i18next.addResourceBundle(lang, defaultNS, resources, true, true)
-      //   i18next.reloadResources(lang, defaultNS)
-      // } else {
+
       const nsName = file.match(/locales\/(.+?)\//)?.[1]
 
       if (!nsName) return
@@ -48,7 +39,6 @@ if (import.meta.hot) {
 
       console.info("reload", lang, nsName)
       await i18next.reloadResources(lang, nsName)
-      // }
 
       import.meta.env.DEV && EventBus.dispatch("I18N_UPDATE", "")
     },

src/renderer/src/providers/i18n-provider.tsx

@@ -42,37 +42,35 @@ const langChangedHandler = async (lang: string) => {
 
   loadingLangLock.add(lang)
 
-  const nsGlobbyMap = import.meta.glob("@locales/*/*.json")
+  if (import.meta.env.DEV) {
+    const nsGlobbyMap = import.meta.glob("@locales/*/*.json")
 
-  // const rootGlobbyMap = import.meta.glob("@locales/*.json")
-  // const rootResources = await rootGlobbyMap[`../../locales/${lang}.json`]()
-  //   .then((m: any) => m.default)
-  //   .catch(() => {
-  //     toast.error(`${t("common:tips.load-lng-error")}: ${lang}`)
-  //   })
-  // i18next.addResourceBundle(lang, defaultNS, rootResources, true, true)
+    const namespaces = Object.keys(defaultResources.en)
 
-  const namespaces = Object.keys(defaultResources.en)
+    const res = await Promise.allSettled(
+      namespaces.map(async (ns) => {
+        const loader = nsGlobbyMap[`../../locales/${ns}/${lang}.json`]
 
-  const res = await Promise.allSettled(
-    namespaces.map(async (ns) => {
-      // if (ns === defaultNS) return
+        if (!loader) return
+        const nsResources = await loader().then((m: any) => m.default)
 
-      const loader = nsGlobbyMap[`../../locales/${ns}/${lang}.json`]
-
-      if (!loader) return
-      const nsResources = await loader().then((m: any) => m.default)
+        i18next.addResourceBundle(lang, ns, nsResources, true, true)
+      }),
+    )
 
-      i18next.addResourceBundle(lang, ns, nsResources, true, true)
-    }),
-  )
+    for (const r of res) {
+      if (r.status === "rejected") {
+        toast.error(`${t("common:tips.load-lng-error")}: ${lang}`)
+        loadingLangLock.delete(lang)
 
-  for (const r of res) {
-    if (r.status === "rejected") {
-      toast.error(`${t("common:tips.load-lng-error")}: ${lang}`)
-      loadingLangLock.delete(lang)
+        return
+      }
+    }
+  } else {
+    const res = await eval(`import('/locales/${lang}.js').then((res) => res?.default || res)`)
 
-      return
+    for (const namespace in res) {
+      i18next.addResourceBundle(lang, namespace, res[namespace], true, true)
     }
   }
 

vite.config.ts

@@ -79,7 +79,7 @@ export default ({ mode }) => {
           __debug_proxy: resolve(ROOT, "/__debug_proxy.html"),
         },
         output: {
-          experimentalMinChunkSize: 500_000,
+          // experimentalMinChunkSize: 500_000,
         },
       },
     },
@@ -97,7 +97,6 @@ export default ({ mode }) => {
         }),
       htmlPlugin(typedEnv),
       mkcert(),
-
       devPrint(),
 
       process.env.ANALYZER && analyzer(),