初始化项目

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "antd": "^5.18.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/App.jsx

@@ -1,75 +1,20 @@
-import {useState} from 'react';
-import reactLogo from './assets/react.svg';
-import viteLogo from '/vite.svg';
+import {lazy, Suspense, useState} from 'react';
 import './App.css';
+import {Button} from "antd";
 
-function a() {
-    console.log("fun a");
-}
-
-console.log(a);
-
-const b = function () {
-    console.log("fun b");
-}
-console.log(b);
-
-const c = () => {
-    console.log("fun c");
-}
-console.log(c);
-
-async function getCode() {
-    const response = await fetch('/api/auth/captcha', {method: 'POST'});
-    const json = await response.json();
-    await sleep(1000);
-    console.log(json);
-}
-
-function sleep(s) {
-    return new Promise((resolve) => {
-        setTimeout(() => {
-            resolve("=======>")
-        }, s);
-    });
-}
+const Page = lazy(async () => {
+    const page = await import("./page1");
+    return page.page();
+});
 
 function App() {
-
-    const [count, setCount] = useState(0);
-    const [src, setSrc] = useState(viteLogo);
-
-
-    async function aaaa() {
-        setCount(count => count + 1);
-        const response = await fetch('/api/auth/captcha', {method: 'POST'});
-        const result = await response.json();
-        await sleep(2000);
-        setSrc("data:image/jpeg;base64," + result.data.captcha)
-    }
-
+    const [isOpen, open] = useState(false);
     return (
         <>
-            <div>
-                <a href="https://vitejs.dev" target="_blank">
-                    <img src={src} className="logo" alt="Vite logo"/>
-                </a>
-                <a href="https://react.dev" target="_blank">
-                    <img src={reactLogo} className="logo react" alt="React logo"/>
-                </a>
-            </div>
-            <h1>Vite + React</h1>
-            <div className="card">
-                <button onClick={aaaa}>
-                    count is {count}
-                </button>
-                <p>
-                    Edit <code>src/App.jsx</code> and save to test HMR
-                </p>
-            </div>
-            <p className="read-the-docs">
-                Click on the Vite and React logos to learn more
-            </p>
+            <Button onClick={open.bind(this, true)}>打开</Button>
+            {isOpen && <Suspense>
+                <Page/>
+            </Suspense>}
         </>
     );
 }

src/lazy-button.js

@@ -0,0 +1 @@
+

src/page1.jsx

@@ -0,0 +1,13 @@
+import {sleep} from "./utils.js";
+
+
+export async function page() {
+    await sleep(1000);
+    return {
+        default: () => {
+            return <div>aaaaasssss</div>
+        }
+    }
+}
+
+// export default page;

src/utils.js

@@ -0,0 +1,7 @@
+export function sleep(s) {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve();
+        }, s);
+    });
+}