perf: lazy load katex and inline katex style

Signed-off-by: Innei <tukon479@gmail.com>
RSSNext · Oct 14, 2024 · cb6eeb1 · cb6eeb1
1 parent 25234e1
commit cb6eeb1
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 30 deletions.
diff --git a/apps/renderer/src/components/common/MemoedDangerousHTMLStyle.tsx b/apps/renderer/src/components/common/MemoedDangerousHTMLStyle.tsx
@@ -0,0 +1,19 @@
+import type { FC } from "react"
+import { memo, useMemo } from "react"
+
+export const MemoedDangerousHTMLStyle: FC<
+  {
+    children: string
+  } & React.DetailedHTMLProps<React.StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement> &
+    Record<string, unknown>
+> = memo(({ children, ...rest }) => (
+  <style
+    {...rest}
+    dangerouslySetInnerHTML={useMemo(
+      () => ({
+        __html: children,
+      }),
+      [children],
+    )}
+  />
+))
diff --git a/apps/renderer/src/components/common/ShadowDOM.tsx b/apps/renderer/src/components/common/ShadowDOM.tsx
@@ -1,38 +1,15 @@
 import { nanoid } from "nanoid"
 import type { FC, PropsWithChildren, ReactNode } from "react"
-import {
-  createContext,
-  createElement,
-  memo,
-  useContext,
-  useLayoutEffect,
-  useMemo,
-  useState,
-} from "react"
+import { createContext, createElement, useContext, useLayoutEffect, useMemo, useState } from "react"
 import root from "react-shadow"
 
 import { useUISettingKey } from "~/atoms/settings/ui"
 import { useReduceMotion } from "~/hooks/biz/useReduceMotion"
 import { useIsDark } from "~/hooks/common"
 
-const ShadowDOMContext = createContext(false)
+import { MemoedDangerousHTMLStyle } from "./MemoedDangerousHTMLStyle"
 
-const MemoedDangerousHTMLStyle: FC<
-  {
-    children: string
-  } & React.DetailedHTMLProps<React.StyleHTMLAttributes<HTMLStyleElement>, HTMLStyleElement> &
-    Record<string, unknown>
-> = memo(({ children, ...rest }) => (
-  <style
-    {...rest}
-    dangerouslySetInnerHTML={useMemo(
-      () => ({
-        __html: children,
-      }),
-      [children],
-    )}
-  />
-))
+const ShadowDOMContext = createContext(false)
 
 const weakMapElementKey = new WeakMap<HTMLStyleElement | HTMLLinkElement, string>()
 const cloneStylesElement = (_mutationRecord?: MutationRecord) => {

diff --git a/apps/renderer/src/components/ui/katex/lazy.tsx b/apps/renderer/src/components/ui/katex/lazy.tsx
@@ -0,0 +1,12 @@
+import { lazy, Suspense } from "react"
+
+import type { KateX } from "./index"
+
+const LazyKateX_ = lazy(() => import("./index").then((mod) => ({ default: mod.KateX })))
+export const LazyKateX: typeof KateX = (props) => {
+  return (
+    <Suspense>
+      <LazyKateX_ {...props} />
+    </Suspense>
+  )
+}
diff --git a/apps/renderer/src/components/ui/markdown/Markdown.tsx b/apps/renderer/src/components/ui/markdown/Markdown.tsx
@@ -1,6 +1,7 @@
-import katexStyle from "katex/dist/katex.min.css?url"
+import katexStyle from "katex/dist/katex.min.css?raw"
 import { createElement, Fragment, memo, useEffect, useMemo, useRef, useState } from "react"
 
+import { MemoedDangerousHTMLStyle } from "~/components/common/MemoedDangerousHTMLStyle"
 import { parseHtml } from "~/lib/parse-html"
 import type { RemarkOptions } from "~/lib/parse-markdown"
 import { parseMarkdown } from "~/lib/parse-markdown"
@@ -109,7 +110,7 @@ const HTMLImpl = <A extends keyof JSX.IntrinsicElements = "div">(
     <MarkdownRenderContainerRefContext.Provider value={refElement}>
       <MediaContainerWidthProvider width={containerWidth}>
         <MediaInfoRecordProvider mediaInfo={mediaInfo}>
-          <link href={katexStyle} rel="stylesheet" />
+          <MemoedDangerousHTMLStyle>{katexStyle}</MemoedDangerousHTMLStyle>
           {createElement(as, { ...rest, ref: setRefElement }, markdownElement)}
         </MediaInfoRecordProvider>
       </MediaContainerWidthProvider>

diff --git a/apps/renderer/src/lib/parse-html.ts b/apps/renderer/src/lib/parse-html.ts
@@ -18,7 +18,7 @@ import { VFile } from "vfile"
 import { ShadowDOM } from "~/components/common/ShadowDOM"
 import { Checkbox } from "~/components/ui/checkbox"
 import { ShikiHighLighter } from "~/components/ui/code-highlighter"
-import { KateX } from "~/components/ui/katex"
+import { LazyKateX } from "~/components/ui/katex/lazy"
 import { MarkdownBlockImage, MarkdownLink, MarkdownP } from "~/components/ui/markdown/renderers"
 import { BlockError } from "~/components/ui/markdown/renderers/BlockErrorBoundary"
 import { useIsInParagraphContext } from "~/components/ui/markdown/renderers/ctx"
@@ -372,7 +372,7 @@ const Math = ({ node }) => {
   if (!annotation) return null
   const latex = annotation.value
 
-  return createElement(KateX, {
+  return createElement(LazyKateX, {
     children: latex,
     mode: isInParagraph ? "inline" : "display",
   })