perf(i18n): lazy load translations

Author: purfectliterature

.gitignore

@@ -72,3 +72,5 @@ playwright/.cache/
 coverage/
 
 dump.rdb
+
+compiled-locales

client/app/lib/components/wrappers/I18nProvider.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import { IntlProvider } from 'react-intl';
 
 import {
@@ -8,7 +8,7 @@ import {
 import { useI18nConfig } from 'lib/hooks/session';
 import moment from 'lib/moment';
 
-import translations from '../../../../build/locales/locales.json';
+import LoadingIndicator from '../core/LoadingIndicator';
 
 interface I18nProviderProps {
   children: ReactNode;
@@ -17,26 +17,61 @@ interface I18nProviderProps {
 const getLocaleWithoutRegionCode = (locale: string): string =>
   locale.toLowerCase().split(/[_-]+/)[0];
 
-const getMessages = (locale: string): Record<string, string> | undefined => {
-  const localeWithoutRegionCode = getLocaleWithoutRegionCode(locale);
-
-  return localeWithoutRegionCode !== DEFAULT_LOCALE
-    ? translations[localeWithoutRegionCode] || translations[locale]
-    : undefined;
-};
-
 const I18nProvider = (props: I18nProviderProps): JSX.Element => {
   const { locale, timeZone } = useI18nConfig();
+  const [messages, setMessages] = useState<Record<string, string>>();
 
   useEffect(() => {
     moment.tz.setDefault(timeZone?.trim() || DEFAULT_TIME_ZONE);
   }, [timeZone]);
 
+  const localeWithoutRegionCode = getLocaleWithoutRegionCode(locale);
+
+  useEffect(() => {
+    setMessages(undefined);
+
+    let ignore = false;
+
+    (async (): Promise<void> => {
+      let loadedMessages: Record<string, string>;
+
+      try {
+        loadedMessages = await import(
+          /* webpackChunkName: "locale-[request]" */
+          `../../../../compiled-locales/${localeWithoutRegionCode}.json`
+        );
+      } catch (error) {
+        if (
+          !(
+            error instanceof Error &&
+            error.message.includes('Cannot find module')
+          )
+        )
+          throw error;
+
+        loadedMessages = await import(
+          /* webpackChunkName: "locale-[request]" */
+          `../../../../compiled-locales/${DEFAULT_LOCALE}.json`
+        );
+      }
+
+      if (ignore) return;
+
+      setMessages(loadedMessages);
+    })();
+
+    return () => {
+      ignore = true;
+    };
+  }, [localeWithoutRegionCode]);
+
+  if (!messages) return <LoadingIndicator />;
+
   return (
     <IntlProvider
       defaultLocale={DEFAULT_LOCALE}
       locale={locale}
-      messages={getMessages(locale)}
+      messages={messages}
       textComponent="span"
     >
       {props.children}

client/package.json

@@ -13,7 +13,7 @@
     "build:production": "export NODE_ENV=production && yarn run build:translations && webpack --node-env=production --config webpack.prod.js",
     "build:development": "yarn run build:translations && webpack serve --config webpack.dev.js",
     "build:profile": "yarn run build:translations && webpack serve --config webpack.profile.js --progress=profile",
-    "build:translations": "babel-node scripts/aggregate-translations.js",
+    "build:translations": "formatjs compile-folder --ast locales compiled-locales",
     "extract-translations": "formatjs extract \"app/**/*.{js,jsx,ts,tsx}\" --ignore='**/*.d.ts' --out-file ./locales/en.json",
     "lint-src": "eslint . --ext .js --ext .jsx --ext .ts --ext .tsx --cache --ignore-pattern '**/__test__/**' --ignore-pattern 'coverage/**'",
     "lint-tests": "eslint . --ext .test.js --ext .test.jsx --ext .test.ts --ext .test.tsx --cache",
@@ -174,7 +174,6 @@
     "favicons": "^7.1.4",
     "favicons-webpack-plugin": "^6.0.1",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
-    "glob": "^10.3.7",
     "html-webpack-plugin": "^5.6.0",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",

client/scripts/aggregate-translations.js

@@ -8011,11 +8011,6 @@ mkdirp@^1.0.3:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-mkdirp@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-3.0.1.tgz#e44e4c5607fb279c168241713cc6e0fea9adcb50"
-  integrity sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==
-
 moment-timezone-data-webpack-plugin@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/moment-timezone-data-webpack-plugin/-/moment-timezone-data-webpack-plugin-1.5.1.tgz#9d35dfd3768db55058e1e809d77a2b64bd6d03a4"