more optimization

packages/app/package.json

@@ -10,7 +10,7 @@
     "@noble/hashes": "^1.2.0",
     "@protobufjs/base64": "^1.1.2",
     "@reduxjs/toolkit": "^1.9.1",
-    "@scure/bip32": "^1.1.5",
+    "@scure/bip32": "^1.3.0",
     "@scure/bip39": "^1.1.1",
     "@snort/nostr": "^1.0.0",
     "@szhsin/react-menu": "^3.3.1",

packages/app/src/Element/Textarea.tsx

@@ -3,7 +3,6 @@ import "./Textarea.css";
 
 import { useIntl } from "react-intl";
 import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
-import emoji from "@jukben/emoji-search";
 import TextareaAutosize from "react-textarea-autosize";
 import { NostrPrefix } from "@snort/nostr";
 
@@ -61,8 +60,10 @@ const Textarea = (props: TextareaProps) => {
     return await UserCache.search(token);
   };
 
-  const emojiDataProvider = (token: string) => {
-    return emoji(token)
+  const emojiDataProvider = async (token: string) => {
+    const emoji = await import("@jukben/emoji-search");
+    return emoji
+      .default(token)
       .slice(0, 5)
       .map(({ name, char }) => ({ name, char }));
   };

packages/app/src/IntlProvider.tsx

@@ -1,22 +1,7 @@
-import { type ReactNode } from "react";
+import { useEffect, useState, type ReactNode } from "react";
 import { IntlProvider as ReactIntlProvider } from "react-intl";
 
 import enMessages from "translations/en.json";
-import esMessages from "translations/es_ES.json";
-import zhMessages from "translations/zh_CN.json";
-import twMessages from "translations/zh_TW.json";
-import jaMessages from "translations/ja_JP.json";
-import frMessages from "translations/fr_FR.json";
-import huMessages from "translations/hu_HU.json";
-import idMessages from "translations/id_ID.json";
-import arMessages from "translations/ar_SA.json";
-import itMessages from "translations/it_IT.json";
-import deMessages from "translations/de_DE.json";
-import ruMessages from "translations/ru_RU.json";
-import svMessages from "translations/sv_SE.json";
-import hrMessages from "translations/hr_HR.json";
-import taINMessages from "translations/ta_IN.json";
-
 import useLogin from "Hooks/useLogin";
 
 const DefaultLocale = "en-US";
@@ -24,65 +9,76 @@ const DefaultLocale = "en-US";
 const getMessages = (locale: string) => {
   const truncatedLocale = locale.toLowerCase().split(/[_-]+/)[0];
 
-  const matchLang = (lng: string) => {
+  const matchLang = async (lng: string) => {
     switch (lng) {
       case "es-ES":
       case "es":
-        return esMessages;
+        return (await import("translations/es_ES.json")).default;
       case "zh-CN":
       case "zh-Hans-CN":
       case "zh":
-        return zhMessages;
+        return (await import("translations/zh_CN.json")).default;
       case "zh-TW":
-        return twMessages;
+        return (await import("translations/zh_TW.json")).default;
       case "ja-JP":
       case "ja":
-        return jaMessages;
+        return (await import("translations/ja_JP.json")).default;
       case "fr-FR":
       case "fr":
-        return frMessages;
+        return (await import("translations/fr_FR.json")).default;
       case "hu-HU":
       case "hu":
-        return huMessages;
+        return (await import("translations/hu_HU.json")).default;
       case "id-ID":
       case "id":
-        return idMessages;
+        return (await import("translations/id_ID.json")).default;
       case "ar-SA":
       case "ar":
-        return arMessages;
+        return (await import("translations/ar_SA.json")).default;
       case "it-IT":
       case "it":
-        return itMessages;
+        return (await import("translations/it_IT.json")).default;
       case "de-DE":
       case "de":
-        return deMessages;
+        return (await import("translations/de_DE.json")).default;
       case "ru-RU":
       case "ru":
-        return ruMessages;
+        return (await import("translations/ru_RU.json")).default;
       case "sv-SE":
       case "sv":
-        return svMessages;
+        return (await import("translations/sv_SE.json")).default;
       case "hr-HR":
       case "hr":
-        return hrMessages;
+        return (await import("translations/hr_HR.json")).default;
       case "ta-IN":
       case "ta":
-        return taINMessages;
+        return (await import("translations/ta_IN.json")).default;
       case DefaultLocale:
       case "en":
         return enMessages;
     }
   };
 
-  return matchLang(locale) ?? matchLang(truncatedLocale) ?? enMessages;
+  return matchLang(locale) ?? matchLang(truncatedLocale) ?? Promise.resolve(enMessages);
 };
 
 export const IntlProvider = ({ children }: { children: ReactNode }) => {
   const { language } = useLogin().preferences;
   const locale = language ?? getLocale();
+  const [messages, setMessages] = useState<Record<string, string>>(enMessages);
+
+  useEffect(() => {
+    getMessages(locale)
+      .then(x => {
+        if (x) {
+          setMessages(x);
+        }
+      })
+      .catch(console.error);
+  }, [language]);
 
   return (
-    <ReactIntlProvider locale={locale} messages={getMessages(locale)}>
+    <ReactIntlProvider locale={locale} messages={messages}>
       {children}
     </ReactIntlProvider>
   );

packages/app/src/Pages/settings/Preferences.tsx

@@ -1,8 +1,7 @@
 import "./Preferences.css";
 
 import { FormattedMessage, useIntl } from "react-intl";
-import emoji from "@jukben/emoji-search";
-
+import { useEffect, useState } from "react";
 import useLogin from "Hooks/useLogin";
 import { DefaultPreferences, updatePreferences, UserPreferences } from "Login";
 import { DefaultImgProxy } from "Const";
@@ -32,6 +31,14 @@ const PreferencesPage = () => {
   const { formatMessage } = useIntl();
   const login = useLogin();
   const perf = login.preferences;
+  const [emoji, setEmoji] = useState<Array<{ name: string; char: string }>>([]);
+
+  useEffect(() => {
+    (async () => {
+      const emoji = await import("@jukben/emoji-search");
+      setEmoji(emoji.default("").map(a => ({ name: a.name, char: a.char })));
+    })();
+  }, []);
 
   return (
     <div className="preferences">
@@ -319,7 +326,7 @@ const PreferencesPage = () => {
               <option value="+">
                 + <FormattedMessage {...messages.Default} />
               </option>
-              {emoji("").map(({ name, char }) => {
+              {emoji.map(({ name, char }) => {
                 return (
                   <option value={char}>
                     {name} {char}

packages/app/webpack.config.js

@@ -2,7 +2,7 @@
 
 const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
 const ESLintPlugin = require("eslint-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
@@ -78,7 +78,35 @@ const config = {
   optimization: {
     usedExports: true,
     chunkIds: "deterministic",
-    minimizer: ["...", new CssMinimizerPlugin()],
+    minimize: isProduction,
+    minimizer: [
+      "...",
+      // same as https://github.com/facebook/create-react-app/blob/main/packages/react-scripts/config/webpack.config.js
+      new TerserPlugin({
+        terserOptions: {
+          parse: {
+            ecma: 8,
+          },
+          compress: {
+            ecma: 5,
+            warnings: false,
+            comparisons: false,
+            inline: 2,
+          },
+          mangle: {
+            safari10: true,
+          },
+          keep_classnames: isProduction,
+          keep_fnames: isProduction,
+          output: {
+            ecma: 5,
+            comments: false,
+            ascii_only: true,
+          },
+        },
+      }),
+      new CssMinimizerPlugin(),
+    ],
   },
   resolve: {
     extensions: [".tsx", ".ts", ".jsx", ".js", "..."],