impr: 优化组件加载性能

JackySoft · Dec 18, 2024 · e1125d1 · e1125d1
1 parent 3418894
commit e1125d1
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 27 deletions.
diff --git a/packages/editor/src/components/SpinLoading.tsx b/packages/editor/src/components/SpinLoading.tsx
@@ -0,0 +1,12 @@
+import { Spin } from 'antd';
+import { memo } from 'react';
+
+/**
+ * 用于组件懒加载时显示Loading效果
+ * @param size 尺寸
+ * @returns 返回Loading组件
+ */
+function SpinLoading({ size = 'default' }: { size?: 'default' | 'small' | 'large' }) {
+  return <Spin size={size} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 30 }} />;
+}
+export default memo(SpinLoading);
diff --git a/packages/editor/src/components/StyleConfig/StyleConfig.tsx b/packages/editor/src/components/StyleConfig/StyleConfig.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { Select, Form, Input, Slider, Radio, Tooltip, Flex, InputNumber } from 'antd';
 import { useDebounceFn } from 'ahooks';
 import { CaretDownOutlined, AlignLeftOutlined, AlignCenterOutlined, AlignRightOutlined } from '@ant-design/icons';
@@ -331,4 +331,4 @@ const StyleConfig = () => {
   );
 };
 
-export { StyleConfig };
+export default memo(StyleConfig);
diff --git a/packages/editor/src/layout/EditLayout.tsx b/packages/editor/src/layout/EditLayout.tsx
@@ -1,14 +1,15 @@
-import { useEffect, useState } from 'react';
+import React, { lazy, useEffect, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { ConfigProvider, Splitter } from 'antd';
 import { useShallow } from 'zustand/react/shallow';
-import ConfigPanel from './components/ConfigPanel/ConfigPanel';
-import Menu from './components/Menu';
 import { usePageStore } from '@/stores/pageStore';
+import SpinLoading from '@/components/SpinLoading';
 import './layout.less';
 
+const Menu = lazy(() => import('./components/Menu'));
+const ConfigPanel = lazy(() => import('./components/ConfigPanel/ConfigPanel'));
 /**
  * 编辑器布局组件
  */
@@ -41,13 +42,17 @@ const EditLayout = () => {
         >
           <Splitter onResize={setSizes}>
             <Splitter.Panel collapsible size={sizes[0]} min={320}>
-              <Menu />
+              <React.Suspense fallback={<SpinLoading />}>
+                <Menu />
+              </React.Suspense>
             </Splitter.Panel>
             <Splitter.Panel size={sizes[1]}>
               <Outlet></Outlet>
             </Splitter.Panel>
             <Splitter.Panel collapsible size={sizes[2]} min={320}>
-              <ConfigPanel />
+              <React.Suspense fallback={<SpinLoading />}>
+                <ConfigPanel />
+              </React.Suspense>
             </Splitter.Panel>
           </Splitter>
         </ConfigProvider>

diff --git a/packages/editor/src/layout/components/ConfigPanel/ConfigPanel.tsx b/packages/editor/src/layout/components/ConfigPanel/ConfigPanel.tsx
@@ -1,23 +1,27 @@
-import SetterRender from '@/components/SetterRender/SetterRender';
-import { StyleConfig } from '@/components/StyleConfig/StyleConfig';
-import * as Components from '@/packages/index';
-import type { TabsProps } from 'antd';
+import { Suspense, lazy, memo, useEffect, useState } from 'react';
 import { ConfigProvider, Form, Tabs } from 'antd';
-import ApiConfig from '@/components/ApiConfig/ApiConfig';
-import { memo, useEffect, useState } from 'react';
-import EventConfig from '@/components/EventConfig/EventConfig';
+import type { TabsProps } from 'antd';
 import { useDebounceFn } from 'ahooks';
+import * as Components from '@/packages/index';
 import { usePageStore } from '@/stores/pageStore';
 import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
 import { message } from '@/utils/AntdGlobal';
 import { defaultsDeep } from 'lodash-es';
 import copy from 'copy-to-clipboard';
+import SpinLoading from '@/components/SpinLoading';
 import styles from './index.module.less';
 
+// 属性设置器
+const SetterRender = lazy(() => import('@/components/SetterRender/SetterRender'));
+// 样式配置
+const StyleConfig = lazy(() => import('@/components/StyleConfig/StyleConfig'));
+// 事件配置
+const EventConfig = lazy(() => import('@/components/EventConfig/EventConfig'));
+// 接口配置
+const ApiConfig = lazy(() => import('@/components/ApiConfig/ApiConfig'));
 /**
  * 生成左侧组件列表
  */
-
 const ConfigPanel = memo(() => {
   const { pageName, pageProps, selectedElement, savePageInfo, elementsMap, editElement } = usePageStore((state) => {
     return {
@@ -121,24 +125,38 @@ const ConfigPanel = memo(() => {
             )}
             {isCopy ? <CheckOutlined className={styles.ml5} /> : <CopyOutlined onClick={handleCopy} className={styles.ml5} />}
           </div>
-          <SetterRender attrs={ComponentConfig?.attrs || []} form={form} />
+          <Suspense fallback={<SpinLoading />}>
+            <SetterRender attrs={ComponentConfig?.attrs || []} form={form} />
+          </Suspense>
         </Form>
       ),
     },
     {
       key: 'style',
       label: `样式`,
-      children: <StyleConfig />,
+      children: (
+        <Suspense fallback={<SpinLoading />}>
+          <StyleConfig />
+        </Suspense>
+      ),
     },
     {
       key: 'event',
       label: `事件`,
-      children: <EventConfig />,
+      children: (
+        <Suspense fallback={<SpinLoading />}>
+          <EventConfig />
+        </Suspense>
+      ),
     },
     {
       key: 'api',
       label: `数据`,
-      children: <ApiConfig />,
+      children: (
+        <Suspense fallback={<SpinLoading />}>
+          <ApiConfig />
+        </Suspense>
+      ),
     },
   ];
 

diff --git a/packages/editor/src/packages/Scene/MarsTable/DragColumn.tsx b/packages/editor/src/packages/Scene/MarsTable/DragColumn.tsx
@@ -1,12 +1,12 @@
-import { useRef } from 'react';
+import { memo, useRef } from 'react';
 import { Form, Input, Space } from 'antd';
 import { EditOutlined, HolderOutlined, MinusOutlined, PlusOutlined } from '@ant-design/icons';
 import { useDrag, useDrop } from 'react-dnd';
 import { createId } from '@/packages/utils/util';
 /**
  * 表格配置
  */
-const DragColumn = ({ index, move, handleOpen, add, remove }: any) => {
+const DragColumn = memo(({ index, move, handleOpen, add, remove }: any) => {
   const ref = useRef<HTMLDivElement>(null);
 
   const [, drop] = useDrop<{ index: number }>({
@@ -73,5 +73,5 @@ const DragColumn = ({ index, move, handleOpen, add, remove }: any) => {
       </Space>
     </>
   );
-};
+});
 export default DragColumn;
diff --git a/packages/editor/src/router/LazyLoad.tsx b/packages/editor/src/router/LazyLoad.tsx
@@ -1,16 +1,13 @@
 import { Suspense } from 'react';
-import { Spin } from 'antd';
+import SpinLoading from '@/components/SpinLoading';
 /**
  * 组件懒加载，结合Suspense实现
  * @param Component 组件对象
  * @returns 返回新组件
  */
 export const lazyLoad = (Component: React.FC, isEditor?: boolean): React.ReactNode => {
-  // 编辑器组件由于比较慢，增加一个Loading效果
   return (
-    <Suspense
-      fallback={isEditor ? <Spin size="large" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 30 }} /> : null}
-    >
+    <Suspense fallback={isEditor ? <SpinLoading size="large" /> : null}>
       <Component />
     </Suspense>
   );