Battle against slow startup time

Seems like Intl and tinyld could be the cause
cheeaun · Sep 16, 2024 · 4ae1c38 · 4ae1c38
1 parent 572358f
commit 4ae1c38
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 98 deletions.
diff --git a/src/components/compose.jsx b/src/components/compose.jsx
@@ -16,7 +16,7 @@ import {
 } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 import stringLength from 'string-length';
-import { detectAll } from 'tinyld/light';
+// import { detectAll } from 'tinyld/light';
 import { uid } from 'uid/single';
 import { useDebouncedCallback, useThrottledCallback } from 'use-debounce';
 import { useSnapshot } from 'valtio';
@@ -1169,11 +1169,12 @@ function Compose({
                 <option value="public">
                   <Trans>Public</Trans>
                 </option>
-                {(supports('@pleroma/local-visibility-post') || supports('@akkoma/local-visibility-post')) &&
+                {(supports('@pleroma/local-visibility-post') ||
+                  supports('@akkoma/local-visibility-post')) && (
                   <option value="local">
                     <Trans>Local</Trans>
                   </option>
-                }
+                )}
                 <option value="unlisted">
                   <Trans>Unlisted</Trans>
                 </option>
@@ -1673,7 +1674,8 @@ const getCustomEmojis = pmem(_getCustomEmojis, {
   maxAge: 30 * 60 * 1000, // 30 minutes
 });
 
-const detectLangs = (text) => {
+const detectLangs = async (text) => {
+  const { detectAll } = await import('tinyld/light');
   const langs = detectAll(text);
   if (langs?.length) {
     // return max 2
@@ -1963,13 +1965,15 @@ const Textarea = forwardRef((props, ref) => {
     });
     const text = dom.innerText?.trim();
     if (!text) return;
-    const langs = detectLangs(text);
-    if (langs?.length) {
-      onTrigger?.({
-        name: 'auto-detect-language',
-        languages: langs,
-      });
-    }
+    (async () => {
+      const langs = await detectLangs(text);
+      if (langs?.length) {
+        onTrigger?.({
+          name: 'auto-detect-language',
+          languages: langs,
+        });
+      }
+    })();
   }, 2000);
 
   return (

diff --git a/src/components/relative-time.jsx b/src/components/relative-time.jsx
@@ -14,10 +14,12 @@ function isValidDate(value) {
   }
 }
 
-const resolvedLocale = new Intl.DateTimeFormat().resolvedOptions().locale;
+const resolvedLocale = mem(
+  () => new Intl.DateTimeFormat().resolvedOptions().locale,
+);
 const DTF = mem((locale, opts = {}) => {
   const regionlessLocale = locale.replace(/-[a-z]+$/i, '');
-  const lang = localeMatch([regionlessLocale], [resolvedLocale], locale);
+  const lang = localeMatch([regionlessLocale], [resolvedLocale()], locale);
   try {
     return new Intl.DateTimeFormat(lang, opts);
   } catch (e) {}

diff --git a/src/components/status.jsx b/src/components/status.jsx
@@ -26,7 +26,7 @@ import {
 } from 'preact/hooks';
 import punycode from 'punycode/';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { detectAll } from 'tinyld/light';
+// import { detectAll } from 'tinyld/light';
 import { useLongPress } from 'use-long-press';
 import { useSnapshot } from 'valtio';
 
@@ -51,7 +51,6 @@ import htmlContentLength from '../utils/html-content-length';
 import isRTL from '../utils/is-rtl';
 import isMastodonLinkMaybe from '../utils/isMastodonLinkMaybe';
 import localeMatch from '../utils/locale-match';
-import mem from '../utils/mem';
 import niceDateTime from '../utils/nice-date-time';
 import openCompose from '../utils/open-compose';
 import pmem from '../utils/pmem';
@@ -168,7 +167,8 @@ const SIZE_CLASS = {
   l: 'large',
 };
 
-const detectLang = mem((text) => {
+const detectLang = pmem(async (text) => {
+  const { detectAll } = await import('tinyld/light');
   text = text?.trim();
 
   // Ref: https://github.com/komodojp/tinyld/blob/develop/docs/benchmark.md
@@ -304,8 +304,8 @@ function Status({
     if (!content) return;
     if (_language) return;
     let timer;
-    timer = setTimeout(() => {
-      let detected = detectLang(
+    timer = setTimeout(async () => {
+      let detected = await detectLang(
         getHTMLText(content, {
           preProcess: (dom) => {
             // Remove anything that can skew the language detection