use lazy loading in router

package.json

@@ -35,6 +35,7 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "eslint --ext .ts --ext .tsx src",
+    "fmt": "eslint --ext .ts --ext .tsx src --fix",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/ui/JoinRoom.tsx → src/ui/Login.tsx

@@ -11,7 +11,7 @@ import React, { useState, ChangeEvent } from "react";
 import { useNavigate } from "react-router-dom";
 import "../styles/core.scss";
 
-export default function JoinRoom() {
+export default function Login() {
   const [player, setPlayer] = useState("");
   const [passWd, setPasswd] = useState("");
   const [ip, setIp] = useState("");

src/ui/Neos.tsx

-import React from "react";
-import JoinRoom from "./JoinRoom";
-import WaitRoomV2 from "./WaitRoom";
-import MoraV2 from "./Mora";
+import React, { Suspense } from "react";
 import { Routes, Route } from "react-router-dom";
-import NeosDuel from "./Duel/main";
+
+const Login = React.lazy(() => import("./Login"));
+const WaitRoom = React.lazy(() => import("./WaitRoom"));
+const Mora = React.lazy(() => import("./Mora"));
+const NeosDuel = React.lazy(() => import("./Duel/main"));
 
 export default function () {
   // FIXME: 这里Mora/Duel路由应该由每个房间指定一个路径
   return (
     <Routes>
-      <Route path="/" element={<JoinRoom />} />
-      <Route path="/room/:player/:passWd/:ip" element={<WaitRoomV2 />} />
-      <Route path="/mora/:player/:passWd/:ip" element={<MoraV2 />} />
-      <Route path="/duel/:player/:passWd/:ip" element={<NeosDuel />} />
+      <Route
+        path="/"
+        element={
+          <Suspense fallback={<div>Loading...</div>}>
+            <Login />
+          </Suspense>
+        }
+      />
+      <Route
+        path="/room/:player/:passWd/:ip"
+        element={
+          <Suspense fallback={<div>Loading...</div>}>
+            <WaitRoom />
+          </Suspense>
+        }
+      />
+      <Route
+        path="/room/:player/:passWd/:ip"
+        element={
+          <Suspense fallback={<div>Loading...</div>}>
+            <Mora />
+          </Suspense>
+        }
+      />
+      <Route
+        path="/room/:player/:passWd/:ip"
+        element={
+          <Suspense fallback={<div>Loading...</div>}>
+            <NeosDuel />
+          </Suspense>
+        }
+      />
     </Routes>
   );
 }