add LazyComponent

Author: xlorne

admin-ui/rsbuild.config.ts

@@ -52,11 +52,11 @@ export default defineConfig({
         template: './public/index.html',
     },
     performance: {
-        chunkSplit: {
-            strategy: 'split-by-size',
-            minSize: 10000,
-            maxSize: 30000,
-        },
+        // chunkSplit: {
+        //     strategy: 'split-by-size',
+        //     minSize: 10000,
+        //     maxSize: 30000,
+        // },
     },
     tools: {
         rspack: (config) => {

admin-ui/src/components/LazyComponent/index.tsx

@@ -0,0 +1,29 @@
+import React, {lazy, Suspense} from 'react';
+import {Spin} from "antd";
+
+
+interface LazyComponentProps {
+    lazy:()=> Promise<{default: React.ComponentType<any>}>;
+}
+
+const LazyComponent:React.FC<LazyComponentProps> = (props) => {
+
+    const PageComponent = lazy(() => {
+        return props.lazy();
+    });
+
+    const fallback = (
+        <Spin size="large" tip="Loading">
+            <div style={{minHeight: 100}}/>
+        </Spin>
+    );
+
+    return (
+        <Suspense fallback={fallback}>
+            <PageComponent/>
+        </Suspense>
+    );
+};
+
+export default LazyComponent;
+

admin-ui/src/index.tsx

@@ -7,7 +7,9 @@ import store from "@/store/Redux";
 import {ConfigProvider} from "antd";
 import zhCN from 'antd/es/locale/zh_CN';
 import '@/styles/index.scss';
-import "@/config/register.component";
+import("@/config/register.component").then(()=>{
+    console.log('register.component loaded');
+});
 import {CSSUtils, ThemeConfig, ThemeProvider} from "@codingapi/ui-framework";
 
 const root = ReactDOM.createRoot(

admin-ui/src/pages/welcome/index.tsx

@@ -2,12 +2,10 @@ import React from 'react';
 import {PageContainer} from "@ant-design/pro-components";
 import './index.scss';
 
-
 const WelcomePage = () => {
 
     return (
         <PageContainer>
-
             <ul>Admin-UI 支持的功能有</ul>
             <ul>1. 自定义流程</ul>
             <ul>2. 表单渲染</ul>

mobile-ui/package.json

@@ -15,7 +15,6 @@
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.13",
     "jszip": "^3.10.1",
-    "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -75,6 +74,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "lodash": "^4.17.21",
     "mockjs": "^1.1.0",
     "sass": "^1.89.2",
     "sass-loader": "^16.0.1",

mobile-ui/rsbuild.config.ts

@@ -50,11 +50,11 @@ export default defineConfig({
         template: './public/index.html',
     },
     performance: {
-        chunkSplit: {
-            strategy: 'split-by-size',
-            minSize: 10000,
-            maxSize: 30000,
-        },
+        // chunkSplit: {
+        //     strategy: 'split-by-size',
+        //     minSize: 10000,
+        //     maxSize: 30000,
+        // },
     },
     tools: {
     }

mobile-ui/src/components/LazyComponent/index.tsx

@@ -0,0 +1,23 @@
+import React, {lazy, Suspense} from 'react';
+import {Loading} from "antd-mobile";
+
+
+interface LazyComponentProps {
+    lazy:()=> Promise<{default: React.ComponentType<any>}>;
+}
+
+const LazyComponent:React.FC<LazyComponentProps> = (props) => {
+
+    const PageComponent = lazy(() => {
+        return props.lazy();
+    });
+
+    return (
+        <Suspense fallback={<Loading />}>
+            <PageComponent/>
+        </Suspense>
+    );
+};
+
+export default LazyComponent;
+

mobile-ui/src/config/route.tsx

@@ -1,59 +1,109 @@
-import Login from "@/pages/login";
 import NotFound from "@/layout/NotFound";
-import Layout from "@/layout";
-import HomePage from "@/pages/home";
 import {Route} from "react-router";
 import {RouteObject} from "react-router/dist/lib/context";
 import React from "react";
-import LeaveListPage from "@/pages/leave";
-import LeaveCreatePage from "@/pages/leave/create";
-import FlowListPage from "@/pages/flow";
-import FlowDetailPage from "@/pages/flow/detail";
-import LeaveDetailPage from "@/pages/leave/detail";
-import FormPage from "@/pages/form";
-import MircoPage from "@/pages/mirco";
-
+import LazyComponent from "@/components/LazyComponent";
 
 export const routes: RouteObject[] = [
     {
         path: "/login",
-        element: <Login/>,
+        element: (
+            <LazyComponent
+                lazy={() => {
+                    return import('@/pages/login');
+                }}
+            />
+        ),
     },
     {
         path: '/',
-        element: <Layout/>,
+        element: (
+            <LazyComponent
+                lazy={() => {
+                    return import('@/layout/index');
+                }}
+            />
+        ),
         children: [
             {
                 path: "/",
-                element: <HomePage/>,
+                element: (
+                    <LazyComponent
+                        lazy={() => {
+                            return import('@/pages/home');
+                        }}
+                    />
+                ),
             },
             {
                 path: "/form",
-                element: <FormPage/>,
+                element: (
+                    <LazyComponent
+                        lazy={() => {
+                            return import('@/pages/form');
+                        }}
+                    />
+                ),
             },
             {
                 path: "/mirco",
-                element: <MircoPage/>,
+                element: (
+                    <LazyComponent
+                        lazy={() => {
+                            return import('@/pages/mirco');
+                        }}
+                    />
+                ),
             },
             {
                 path: "/leave/index",
-                element: <LeaveListPage/>,
+                element: (
+                    <LazyComponent
+                        lazy={() => {
+                            return import('@/pages/leave');
+                        }}
+                    />
+                ),
             },
             {
                 path: "/leave/create",
-                element: <LeaveCreatePage/>,
+                element: (
+                    <LazyComponent
+                        lazy={() => {
+                            return import('@/pages/leave/create');
+                        }}
+                    />
+                ),
             },
             {
                 path: "/leave/detail",
-                element: <LeaveDetailPage/>,
+                element: (
+                    <LazyComponent
+                        lazy={() => {
+                            return import('@/pages/leave/detail');
+                        }}
+                    />
+                ),
             },
             {
                 path: "/flow/list",
-                element: <FlowListPage/>,
+                element: (
+                    <LazyComponent
+                        lazy={() => {
+                            return import('@/pages/flow');
+                        }}
+                    />
+                ),
             },
             {
                 path: "/flow/detail",
-                element: <FlowDetailPage/>,
+                element: (
+                    <LazyComponent
+                        lazy={() => {
+                            return import('@/pages/flow/detail');
+                        }}
+                    />
+                ),
             },
             {
                 path: '/*',

mobile-ui/src/index.tsx

@@ -1,12 +1,15 @@
 import React, {createContext} from 'react';
 import ReactDOM from 'react-dom/client';
-import reportWebVitals from './reportWebVitals';
+// import reportWebVitals from './reportWebVitals';
 import '@/styles/index.scss';
 import {createHashRouter, RouterProvider} from "react-router-dom";
 import {routes} from "@/config/route";
 import zhCN from "antd-mobile/es/locales/zh-CN";
 import {ConfigProvider} from "antd-mobile";
-import "@/config/register.component";
+
+import("@/config/register.component").then(() => {
+    console.log('register.component loaded');
+});
 
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
@@ -26,4 +29,4 @@ root.render(
 
 // If you want to start measuring performance in your app, pass a function
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+// reportWebVitals();