perf: defer heavy modules and add performance baselines

Lazy-load Stripe and the chat reply animation, remove the unused Lottie runtime, and add repeatable bundle and Web Vitals baseline tooling.
This commit is contained in:
2026-07-14 10:55:08 +08:00
parent 0fe74b5371
commit b4904e738b
12 changed files with 846 additions and 31 deletions
+18 -3
View File
@@ -12,7 +12,14 @@
* - 新消息到达时自动滚到底部
* - 用户向上滚动时不强制拉回(保持阅读上下文)
*/
import { useEffect, useLayoutEffect, useMemo, useRef } from "react";
import {
lazy,
Suspense,
useEffect,
useLayoutEffect,
useMemo,
useRef,
} from "react";
import type { UiMessage } from "@/data/dto/chat";
@@ -23,11 +30,15 @@ import {
} from "../chat-render-items";
import { AiDisclosureBanner } from "./ai-disclosure-banner";
import { DateHeader } from "./date-header";
import { LottieMessageBubble } from "./lottie-message-bubble";
import { MessageBubble } from "./message-bubble";
import styles from "./chat-area.module.css";
const CHAT_AUTO_SCROLL_BOTTOM_THRESHOLD = 96;
const ReplyingAnimation = lazy(() =>
import("./lottie-message-bubble").then((module) => ({
default: module.LottieMessageBubble,
})),
);
export interface ChatAreaProps {
messages: readonly UiMessage[];
@@ -104,7 +115,11 @@ export function ChatArea({
onOpenImage,
)}
{isReplyingAI && <LottieMessageBubble />}
{isReplyingAI ? (
<Suspense fallback={null}>
<ReplyingAnimation />
</Suspense>
) : null}
</main>
);
}