perf: split page css from main bundle

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,