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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user