perf: split page css from main bundle

src/components/NotFoundPage.tsx

@@ -1,5 +1,6 @@
 import { HomeOutlined } from "@ant-design/icons";
 import { useCallback } from "react";
+import "../styles/pages/not-found.css";
 
 interface NotFoundPageProps {
   onGoHome: () => void;

src/features/agent/AgentPage.tsx

@@ -14,6 +14,7 @@ import {
   ThunderboltOutlined,
 } from "@ant-design/icons";
 import { useRef, useState } from "react";
+import "../../styles/pages/agent.css";
 import WorkspacePageShell from "../../components/WorkspacePageShell";
 import type { WebGenerationPreviewTask } from "../../types";
 

src/features/assets/AssetsPage.tsx

@@ -11,6 +11,7 @@ import {
   UserOutlined,
 } from "@ant-design/icons";
 import { useCallback, useEffect, useMemo, useRef, useState, type JSX } from "react";
+import "../../styles/pages/assets.css";
 import { assetClient, type ServerAssetItem } from "../../api/assetClient";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
 import { useDebounce } from "../../hooks/useDebounce";

src/features/canvas/CanvasPage.tsx

@@ -28,6 +28,8 @@
 import {
   ReactFlow,
 } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import "../../styles/pages/canvas.css";
 import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type CSSProperties, type MouseEvent, type WheelEvent } from "react";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
 import { assetClient, type ServerAssetItem } from "../../api/assetClient";

src/features/character-mix/CharacterMixPage.tsx

@@ -17,6 +17,7 @@ import {
   VideoCameraOutlined,
 } from "@ant-design/icons";
 import { useCallback, useEffect, useRef, useState } from "react";
+import "../../styles/pages/image-workbench.css";
 import StudioToolLayout from "../../components/StudioToolLayout";
 import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
 import { aiGenerationClient } from "../../api/aiGenerationClient";

src/features/community/CommunityPage.tsx

@@ -10,6 +10,7 @@ import {
   SearchOutlined,
 } from "@ant-design/icons";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import "../../styles/pages/community.css";
 import { useDebounce } from "../../hooks/useDebounce";
 import { communityClient, type ServerCommunityCase } from "../../api/communityClient";
 import WorkspacePageShell from "../../components/WorkspacePageShell";

src/features/compliance/CompliancePage.tsx

@@ -1,4 +1,5 @@
 import { FileTextOutlined, SafetyOutlined } from "@ant-design/icons";
+import "../../styles/pages/compliance.css";
 
 type ComplianceKind = "agreement" | "privacy";
 

src/features/dialog-generator/DialogGeneratorPage.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent, type TouchEvent as ReactTouchEvent } from "react";
+import "../../styles/pages/dialog-generator.css";
 
 type DialogStyle = "style1" | "style2" | "style3" | "style4";
 

src/features/digital-human/AvatarConsolePage.tsx

@@ -24,6 +24,7 @@ import {
   VideoCameraOutlined,
 } from "@ant-design/icons";
 import { useMemo, useRef, useState, type CSSProperties, type PointerEvent, type ReactNode } from "react";
+import "../../styles/pages/avatar-console.css";
 import type { WebViewKey } from "../../types";
 import {
   bringAvatarEditorLayerForward,

src/features/digital-human/DigitalHumanPage.tsx

@@ -18,6 +18,7 @@ import {
   UserOutlined,
 } from "@ant-design/icons";
 import { useCallback, useEffect, useRef, useState } from "react";
+import "../../styles/pages/image-workbench.css";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
 import { uploadAssetWithProgress } from "../../api/uploadWithProgress";
 import { waitForTask } from "../../api/taskSubscription";

src/features/ecommerce/EcommercePage.tsx

@@ -12,7 +12,8 @@ import {
   SettingOutlined,
   SkinOutlined,
 } from "@ant-design/icons";
-import { useEffect, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type ReactNode } from "react";
+import { useEffect, useMemo, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type ReactNode } from "react";
+import "../../styles/pages/ecommerce.css";
 import { ossAssets } from "../../data/ossAssets";
 import { EcommerceProgressBar } from "./EcommerceProgressBar";
 import ImageMentionMenu, { getImageMentionQuery, insertImageMentionValue, type MentionImageOption } from "./ImageMentionMenu";
@@ -1214,6 +1215,34 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
     requirement,
   });
 
+  const latestCloneSettingSnapshot = useMemo(
+    () => createCloneSettingSnapshot(cloneSettingName, "clone-setting-latest"),
+    [
+      cloneOutput,
+      platform,
+      market,
+      language,
+      ratio,
+      cloneSetCounts,
+      selectedCloneDetailModules,
+      cloneModelPanelTab,
+      selectedCloneModelScenes,
+      cloneModelCustomScene,
+      cloneModelGender,
+      cloneModelAge,
+      cloneModelEthnicity,
+      cloneModelBody,
+      cloneModelAppearance,
+      cloneVideoQuality,
+      cloneVideoDuration,
+      cloneVideoSmart,
+      cloneReferenceMode,
+      cloneReplicateLevel,
+      requirement,
+      cloneSettingName,
+    ],
+  );
+
   const persistLatestCloneSetting = () => {
     const snapshot = createCloneSettingSnapshot(cloneSettingName, "clone-setting-latest");
     latestCloneSettingRef.current = snapshot;
@@ -1261,8 +1290,8 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
   };
 
   useEffect(() => {
-    latestCloneSettingRef.current = createCloneSettingSnapshot(cloneSettingName, "clone-setting-latest");
+    latestCloneSettingRef.current = latestCloneSettingSnapshot;
-  });
+  }, [latestCloneSettingSnapshot]);
 
   useEffect(() => {
     const latestSetting = readCloneLatestSetting();

src/features/ecommerce/EcommerceTemplatesPage.tsx

@@ -8,6 +8,8 @@ import {
   TagsOutlined,
 } from "@ant-design/icons";
 import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
+import "../../styles/pages/image-workbench.css";
+import "../../styles/pages/ecommerce.css";
 import type { WebProjectSummary } from "../../types";
 import { useDebounce } from "../../hooks/useDebounce";
 import { templateCarouselCases, templateCases, templateCategories, type TemplateCase } from "./ecommerceTemplates";

src/features/ecommerce/EcommerceVideoWorkspace.tsx

@@ -1,4 +1,5 @@
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import "../../styles/pages/ecommerce-video.css";
 import {
   CloseOutlined,
   CopyOutlined,

src/features/image-workbench/ImageWorkbenchPage.tsx

@@ -24,6 +24,7 @@ import {
   ThunderboltOutlined,
 } from "@ant-design/icons";
 import { useCallback, useEffect, useRef, useState } from "react";
+import "../../styles/pages/image-workbench.css";
 import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
 import { waitForTask } from "../../api/taskSubscription";

src/features/more/MorePage.tsx

@@ -14,6 +14,7 @@ import {
 } from "@ant-design/icons";
 import type { ReactNode } from "react";
 import { useCallback, useEffect, useState } from "react";
+import "../../styles/pages/more.css";
 import type { WebImageWorkbenchTool, WebViewKey } from "../../types";
 
 interface MorePageProps {

src/features/profile/ProfilePage.tsx

@@ -18,6 +18,7 @@ import {
   UserOutlined,
 } from "@ant-design/icons";
 import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from "react";
+import "../../styles/pages/profile.css";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
 import { assetClient } from "../../api/assetClient";
 import { communityClient, type ServerCommunityCase } from "../../api/communityClient";

src/features/provider-health/ProviderHealthPage.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import "../../styles/pages/provider-health.css";
 import {
   CheckCircleOutlined,
   CloseCircleOutlined,
@@ -164,4 +165,4 @@ export default function ProviderHealthPage({ session, onOpenLogin }: ProviderHea
       </div>
     </WorkspacePageShell>
   );
-}
+}

src/features/resolution-upscale/ResolutionUpscalePage.tsx

@@ -16,6 +16,7 @@ import {
   VideoCameraOutlined,
 } from "@ant-design/icons";
 import { useCallback, useEffect, useRef, useState } from "react";
+import "../../styles/pages/image-workbench.css";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
 import { waitForTask } from "../../api/taskSubscription";
 import { saveToolTaskState, loadToolTaskState, clearToolTaskState } from "../workbench/toolKeepalive";

src/features/script-tokens/ScriptTokensPage.tsx

@@ -9,6 +9,8 @@ import {
   UploadOutlined,
 } from "@ant-design/icons";
 import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react";
+import "../../styles/pages/script-tokens-v5.css";
+import "../../styles/pages/script-tokens.css";
 import { evaluateScript } from "../../api/scriptEvalClient";
 import { buildApiUrl, getStoredToken } from "../../api/serverConnection";
 import { useSessionStore } from "../../stores";

src/features/script-tokens/TokenUsagePage.tsx

@@ -11,6 +11,8 @@ import {
   WarningOutlined,
 } from "@ant-design/icons";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import "../../styles/pages/script-tokens-v5.css";
+import "../../styles/pages/script-tokens.css";
 import type {
   WebEnterpriseUsageMember,
   WebEnterpriseUsageRecord,

src/features/subtitle-removal/SubtitleRemovalPage.tsx

@@ -13,6 +13,8 @@ import {
   VideoCameraOutlined,
 } from "@ant-design/icons";
 import { useCallback, useEffect, useRef, useState, type CSSProperties } from "react";
+import "../../styles/pages/image-workbench.css";
+import "../../styles/pages/subtitle-removal.css";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
 import { waitForTask } from "../../api/taskSubscription";
 import { saveToolTaskState, loadToolTaskState, clearToolTaskState } from "../workbench/toolKeepalive";

src/features/watermark-removal/WatermarkRemovalPage.tsx

@@ -13,6 +13,7 @@ import {
   SwapOutlined,
 } from "@ant-design/icons";
 import { useCallback, useEffect, useRef, useState } from "react";
+import "../../styles/pages/image-workbench.css";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
 import { waitForTask } from "../../api/taskSubscription";
 import { saveToolTaskState, loadToolTaskState, clearToolTaskState } from "../workbench/toolKeepalive";

src/features/workbench/WorkbenchPage.tsx

@@ -34,6 +34,7 @@ import {
   type ReactNode,
   type SyntheticEvent,
 } from "react";
+import "../../styles/pages/workbench.css";
 import type { WebGenerationPreviewTask, WebUserSession } from "../../types";
 import { aiGenerationClient } from "../../api/aiGenerationClient";
 import { claimGenerationSlot, getActiveGenerationTaskCount, getGenerationUserKey, releaseGenerationSlot } from "../../api/generationConcurrency";

src/main.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "@xyflow/react/dist/style.css";
 import "./styles/index.css";
 import App from "./App";
 import { reportError } from "./utils/errorReporting";

src/styles/index.css

@@ -9,28 +9,10 @@
 @import "./pages/script-review-visual.css";
 @import "./pages/script-review-showcase.css";
 @import "./pages/model-generation-showcase.css";
-@import "./pages/workbench.css";
-@import "./pages/ecommerce.css";
-@import "./pages/ecommerce-video.css";
-@import "./pages/community.css";
-@import "./pages/assets.css";
-@import "./pages/more.css";
-@import "./pages/avatar-console.css";
 @import "./pages/more-tools.css";
 @import "./pages/studio-layout.css";
-@import "./pages/image-workbench.css";
-@import "./pages/subtitle-removal.css";
-@import "./pages/dialog-generator.css";
 @import "./pages/size-template.css";
-@import "./pages/script-tokens-v5.css";
-@import "./pages/script-tokens.css";
-@import "./pages/profile.css";
-@import "./pages/canvas.css";
-@import "./pages/agent.css";
-@import "./pages/compliance.css";
-@import "./pages/provider-health.css";
 @import "./pages/legacy-pages.css";
-@import "./pages/not-found.css";
 @import "./components/recharge-modal.css";
 @import "./components/dropzone.css";
 @import "./components/skeleton.css";