From 0a1f875590ec7dc6a51ac34cc22079e276d4cbbb Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Wed, 1 Jul 2026 20:45:37 +0800
Subject: [PATCH] perf(markdown): load katex css lazily via local FullMarkdown
 wrapper

core-ui no longer bundles katex.min.css (it would base64-inline ~1.4MB
of fonts into the render-blocking global css). Wrap FullMarkdown locally
to co-locate the katex stylesheet so it loads only in the routes that
render math.
---
 src/components/full-markdown/index.tsx               | 12 ++++++++++++
 src/pages/backends/community/backend-detail.tsx      |  2 +-
 .../components/multiple-chat/message-body.tsx        |  2 +-
 .../components/multiple-chat/think-content.tsx       |  2 +-
 4 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 src/components/full-markdown/index.tsx

diff --git a/src/components/full-markdown/index.tsx b/src/components/full-markdown/index.tsx
new file mode 100644
index 00000000..25f34d18
--- /dev/null
+++ b/src/components/full-markdown/index.tsx
@@ -0,0 +1,12 @@
+// Wrapper around core-ui's FullMarkdown that co-locates the KaTeX stylesheet.
+//
+// core-ui deliberately does NOT bundle katex.min.css (importing it there
+// base64-inlines ~1.4MB of fonts into the shared, render-blocking index.css).
+// Importing it here keeps the KaTeX CSS in the route chunk that actually
+// renders math, so it loads lazily and never blocks first paint.
+//
+// Always import FullMarkdown from this module, not from '@gpustack/core-ui/markdown'.
+import { FullMarkdown } from '@gpustack/core-ui/markdown';
+import 'katex/dist/katex.min.css';
+
+export default FullMarkdown;
diff --git a/src/pages/backends/community/backend-detail.tsx b/src/pages/backends/community/backend-detail.tsx
index 0ba6f7e7..02507a57 100644
--- a/src/pages/backends/community/backend-detail.tsx
+++ b/src/pages/backends/community/backend-detail.tsx
@@ -1,6 +1,6 @@
+import FullMarkdown from '@/components/full-markdown';
 import { BulbOutlined } from '@ant-design/icons';
 import { AutoTooltip } from '@gpustack/core-ui';
-import { FullMarkdown } from '@gpustack/core-ui/markdown';
 import { useIntl } from '@umijs/max';
 import { Button, Tag } from 'antd';
 import _ from 'lodash';
diff --git a/src/pages/playground/components/multiple-chat/message-body.tsx b/src/pages/playground/components/multiple-chat/message-body.tsx
index da7af455..40eafd14 100644
--- a/src/pages/playground/components/multiple-chat/message-body.tsx
+++ b/src/pages/playground/components/multiple-chat/message-body.tsx
@@ -1,5 +1,5 @@
+import FullMarkdown from '@/components/full-markdown';
 import { SimpleAudio } from '@gpustack/core-ui';
-import { FullMarkdown } from '@gpustack/core-ui/markdown';
 import { Input } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
diff --git a/src/pages/playground/components/multiple-chat/think-content.tsx b/src/pages/playground/components/multiple-chat/think-content.tsx
index d5e8f815..cf062769 100644
--- a/src/pages/playground/components/multiple-chat/think-content.tsx
+++ b/src/pages/playground/components/multiple-chat/think-content.tsx
@@ -1,4 +1,4 @@
-import { FullMarkdown } from '@gpustack/core-ui/markdown';
+import FullMarkdown from '@/components/full-markdown';
 import React from 'react';
 import '../../style/think-content.less';