perf(web): manualChunks 拆分 heavy deps + lazy ProcessDesigner/ProcessViewer

- vite.config.ts 添加 vendor-charts/plots/graphs, vendor-flow, vendor-editor 独立 chunk
- vendor-antd 从 3000kB 降至 1532kB，charts 独立 1459kB
- ProcessDesigner/ProcessViewer 改为 React.lazy 按需加载
- 移除 PluginGraphPage 遗留的 animFrameRef 未使用变量

apps/web/src/pages/PluginGraphPage.tsx

@@ -59,7 +59,6 @@ export function PluginGraphPage() {
   const { token } = theme.useToken();
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
-  const animFrameRef = useRef<number>(0);
   const nodePositionsRef = useRef<Map<string, NodePosition>>(new Map());
   const visibleNodesRef = useRef<GraphNode[]>([]);
   const visibleEdgesRef = useRef<GraphEdge[]>([]);

apps/web/src/pages/workflow/InstanceMonitor.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useCallback, useState, useRef } from 'react';
+import { useEffect, useCallback, useState, useRef, lazy, Suspense } from 'react';
-import { Button, message, Modal, Table, Tag } from 'antd';
+import { Button, message, Modal, Spin, Table, Tag } from 'antd';
 import { EyeOutlined, PauseCircleOutlined, PlayCircleOutlined, StopOutlined } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
 import {
@@ -10,7 +10,8 @@ import {
   type ProcessInstanceInfo,
 } from '../../api/workflowInstances';
 import { getProcessDefinition, type NodeDef, type EdgeDef } from '../../api/workflowDefinitions';
-import ProcessViewer from './ProcessViewer';
+
+const ProcessViewer = lazy(() => import('./ProcessViewer'));
 import { useThemeMode } from '../../hooks/useThemeMode';
 
 const statusStyles: Record<string, { bg: string; color: string; text: string }> = {
@@ -289,7 +290,9 @@ export default function InstanceMonitor() {
         width={720}
         loading={viewerLoading}
       >
-        <ProcessViewer nodes={viewerNodes} edges={viewerEdges} activeNodeIds={activeNodeIds} />
+        <Suspense fallback={<div style={{ textAlign: 'center', padding: 40 }}><Spin /></div>}>
+          <ProcessViewer nodes={viewerNodes} edges={viewerEdges} activeNodeIds={activeNodeIds} />
+        </Suspense>
       </Modal>
     </>
   );

apps/web/src/pages/workflow/ProcessDefinitions.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, lazy, Suspense } from 'react';
-import { Button, message, Modal, Space, Table, Tag } from 'antd';
+import { Button, message, Modal, Space, Spin, Table, Tag } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
 import {
@@ -10,7 +10,8 @@ import {
   type ProcessDefinitionInfo,
   type CreateProcessDefinitionRequest,
 } from '../../api/workflowDefinitions';
-import ProcessDesigner from './ProcessDesigner';
+
+const ProcessDesigner = lazy(() => import('./ProcessDesigner'));
 import { useThemeMode } from '../../hooks/useThemeMode';
 
 const statusColors: Record<string, { bg: string; color: string; text: string }> = {
@@ -190,10 +191,12 @@ export default function ProcessDefinitions() {
         width={1200}
         destroyOnClose
       >
-        <ProcessDesigner
+        <Suspense fallback={<div style={{ textAlign: 'center', padding: 40 }}><Spin /></div>}>
-          definitionId={editingId}
+          <ProcessDesigner
-          onSave={handleSave}
+            definitionId={editingId}
-        />
+            onSave={handleSave}
+          />
+        </Suspense>
       </Modal>
     </>
   );

apps/web/vite.config.ts

@@ -26,6 +26,15 @@ export default defineConfig({
           if (id.includes("node_modules/react-dom") || id.includes("node_modules/react/") || id.includes("node_modules/react-router-dom")) {
             return "vendor-react";
           }
+          if (id.includes("node_modules/@ant-design/charts") || id.includes("node_modules/@ant-design/plots") || id.includes("node_modules/@ant-design/graphs")) {
+            return "vendor-charts";
+          }
+          if (id.includes("node_modules/@xyflow/react")) {
+            return "vendor-flow";
+          }
+          if (id.includes("node_modules/@wangeditor/") || id.includes("node_modules/wangeditor/")) {
+            return "vendor-editor";
+          }
           if (id.includes("node_modules/antd") || id.includes("node_modules/@ant-design")) {
             return "vendor-antd";
           }