perf: split translations at build time

Author: Constrat

package.json

@@ -3,11 +3,11 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "build:skiptsc": "vite build",
-    "build:azure": "yarn build:skiptsc && node post-build.mjs",
-    "preview": "vite preview",
+    "dev": "node scripts/split-translations.js && vite",
+    "build": "node scripts/split-translations.js && tsc && vite build",
+    "build:skiptsc": "node scripts/split-translations.js && vite build",
+    "build:azure": "node scripts/split-translations.js && yarn build:skiptsc && node post-build.mjs",
+    "preview": "node scripts/split-translations.js && vite preview",
     "lint": "npm-run-all --parallel lint:check:eslint lint:check:prettier",
     "lint:check:eslint": "eslint src/**/*",
     "lint:check:prettier": "prettier --check src/**/*",
@@ -17,7 +17,8 @@
     "scripts:update": "yarn install && npm-run-all --parallel scripts:update-operators scripts:update-operator-avatars scripts:update-prof-icons",
     "scripts:update-operators": "esno scripts/update-operators.ts",
     "scripts:update-operator-avatars": "esno scripts/update-operator-avatars.ts",
-    "scripts:update-prof-icons": "yarn install && esno scripts/update-prof-icons.ts"
+    "scripts:update-prof-icons": "yarn install && esno scripts/update-prof-icons.ts",
+    "scripts:split-translations": "node scripts/split-translations.js"
   },
   "dependencies": {
     "@blueprintjs/core": "^4.15.1",
@@ -42,6 +43,7 @@
     "fuse.js": "^6.6.2",
     "i18next": "^25.0.0",
     "i18next-browser-languagedetector": "^8.0.4",
+    "i18next-http-backend": "^3.0.2",
     "jotai": "^2.7.0",
     "linkify-react": "^3.0.4",
     "linkifyjs": "^3.0.5",

scripts/split-translations.js

@@ -0,0 +1,53 @@
+const fs = require('fs')
+const path = require('path')
+
+const translations = require('../src/i18n/translations.json')
+
+const outputDir = path.join(__dirname, '../public/locales')
+if (!fs.existsSync(outputDir)) {
+  fs.mkdirSync(outputDir, { recursive: true })
+}
+
+const languages = ['en', 'cn']
+
+function extractLanguageData(lang) {
+  const result = {}
+
+  function extractFromObject(obj, currentPath = []) {
+    for (const [key, value] of Object.entries(obj)) {
+      const newPath = [...currentPath, key]
+
+      if (
+        value &&
+        typeof value === 'object' &&
+        'cn' in value &&
+        'en' in value
+      ) {
+        setNestedValue(result, newPath, value[lang])
+      } else if (value && typeof value === 'object') {
+        extractFromObject(value, newPath)
+      }
+    }
+  }
+
+  function setNestedValue(obj, path, value) {
+    let current = obj
+    for (let i = 0; i < path.length - 1; i++) {
+      if (!current[path[i]]) current[path[i]] = {}
+      current = current[path[i]]
+    }
+    current[path[path.length - 1]] = value
+  }
+
+  extractFromObject(translations)
+  return result
+}
+
+languages.forEach((lang) => {
+  const data = extractLanguageData(lang)
+  fs.writeFileSync(
+    path.join(outputDir, `${lang}.json`),
+    JSON.stringify(data, null, 2),
+  )
+  console.log(`Generated ${lang}.json`)
+})

src/i18n/index.ts

@@ -1,33 +1,8 @@
 import i18n from 'i18next'
 import LanguageDetector from 'i18next-browser-languagedetector'
+import Backend from 'i18next-http-backend'
 import { initReactI18next } from 'react-i18next'
 
-import translations from './translations.json'
-
-const flattenTranslations = (obj, lang) => {
-  const result = {}
-
-  const flatten = (current, prefix = '') => {
-    Object.entries(current).forEach(([key, value]) => {
-      const newKey = prefix ? `${prefix}.${key}` : key
-
-      if (
-        value &&
-        typeof value === 'object' &&
-        'cn' in value &&
-        'en' in value
-      ) {
-        result[newKey] = value[lang]
-      } else if (value && typeof value === 'object') {
-        flatten(value, newKey)
-      }
-    })
-  }
-
-  flatten(obj)
-  return result
-}
-
 const languageDetectorOptions = {
   order: ['localStorage', 'navigator'],
   lookupNavigator: 'language',
@@ -40,16 +15,12 @@ const languageDetectorOptions = {
 }
 
 i18n
+  .use(Backend)
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
-    resources: {
-      cn: {
-        translation: flattenTranslations(translations, 'cn'),
-      },
-      en: {
-        translation: flattenTranslations(translations, 'en'),
-      },
+    backend: {
+      loadPath: '/locales/{{lng}}.json',
     },
     fallbackLng: 'cn',
     detection: languageDetectorOptions,

yarn.lock

@@ -2084,6 +2084,13 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+[email protected]:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-4.0.0.tgz#f037aef1580bb3a1a35164ea2a848ba81b445983"
+  integrity sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==
+  dependencies:
+    node-fetch "^2.6.12"
+
 cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -3139,6 +3146,13 @@ i18next-browser-languagedetector@^8.0.4:
   dependencies:
     "@babel/runtime" "^7.23.2"
 
+i18next-http-backend@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-3.0.2.tgz#7c8daa31aa69679e155ec1f96a37846225bdf907"
+  integrity sha512-PdlvPnvIp4E1sYi46Ik4tBYh/v/NbYfFFgTjkwFl0is8A18s7/bx9aXqsrOax9WUbeNS6mD2oix7Z0yGGf6m5g==
+  dependencies:
+    cross-fetch "4.0.0"
+
 i18next@^25.0.0:
   version "25.0.0"
   resolved "https://registry.yarnpkg.com/i18next/-/i18next-25.0.0.tgz#ae6b44dea48597e556a126c6f4f10d9c18cc62e2"
@@ -4269,7 +4283,7 @@ node-domexception@^1.0.0:
   resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5"
   integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==
 
-node-fetch@^2.6.7:
+node-fetch@^2.6.12, node-fetch@^2.6.7:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
   integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==