Merge pull request #7 from JohnsonMao/develop

feature: lazy import pages

.env.example

@@ -1,5 +1,5 @@
-VITE_CLIENT_ID=tutelary.maomao-5db761ff-e645-4b7f
-VITE_CLIENT_SECRET=559eca3f-e101-4cfb-ad18-d7c779c84bfb
-VITE_MAP_USERNAME=tutelarymao
-VITE_MAP_STYLE_ID=ckwbtexnm49wp14p6ldeczyxv
-VITE_MAP_TOKEN=pk.eyJ1IjoidHV0ZWxhcnltYW8iLCJhIjoiY2x1bnZxNDNyMWhsajJtbjI0dW9objd2diJ9.kGtX-QECwWyt6eXvb-vrrg
+VITE_CLIENT_ID= # TDX Client ID
+VITE_CLIENT_SECRET= # TDX Client Secret
+VITE_MAP_USERNAME= # MapBox Username
+VITE_MAP_STYLE_ID= # MapBox style ID
+VITE_MAP_TOKEN= # MapBox token

package.json

@@ -12,7 +12,6 @@
   },
   "dependencies": {
     "bootstrap": "5.1.3",
-    "jssha": "^3.2.0",
     "leaflet": "^1.7.1",
     "lottie-react-web": "^2.2.2",
     "prop-types": "^15.7.2",

src/App.jsx

@@ -1,26 +1,28 @@
 import { HashRouter, Routes, Route, Navigate } from "react-router-dom";
 
 import { Layout } from "./pages/Layout";
-import Index from "./pages/Index";
-import CityBus from "./pages/CityBus";
-import Favorites from "./pages/Favorites";
-import Nearby from "./pages/Nearby";
-import SearchResult from "./components/SearchResult";
-import RoutePage from "./components/RoutePage";
+import withSuspense from "./components/withSuspense";
 import "./asset/styles/style.scss";
 
+const Index = withSuspense(() => import("./pages/Index"));
+const CityBus = withSuspense(() => import("./pages/CityBus"));
+const SearchResult = withSuspense(() => import("./components/SearchResult"));
+const RoutePage = withSuspense(() => import("./components/RoutePage"));
+const Nearby = withSuspense(() => import("./pages/Nearby"));
+const Favorites = withSuspense(() => import("./pages/Favorites"));
+
 export default function App() {
   return (
     <HashRouter>
       <Routes>
         <Route element={<Layout />}>
-          <Route index element={<Index />} />
-          <Route path="citybus" element={<CityBus />}>
-            <Route index element={<SearchResult />} />
-            <Route path=":id" element={<RoutePage />} />
+          <Route index element={Index} />
+          <Route path="citybus" element={CityBus}>
+            <Route index element={SearchResult} />
+            <Route path=":id" element={RoutePage} />
           </Route>
-          <Route path="nearby/*" element={<Nearby />} />
-          <Route path="favorites" element={<Favorites />} />
+          <Route path="nearby/*" element={Nearby} />
+          <Route path="favorites" element={Favorites} />
           <Route path="/*" element={<Navigate replace to="/" />} />
         </Route>
       </Routes>

src/components/withSuspense.jsx

@@ -0,0 +1,13 @@
+import { Suspense, lazy } from "react";
+
+export default function withSuspense(importer, loading = null) {
+  if (typeof importer !== "function") return null;
+
+  const LazyComponent = lazy(importer);
+
+  return (
+    <Suspense fallback={loading}>
+      <LazyComponent />
+    </Suspense>
+  );
+}

vite.config.js

@@ -14,4 +14,7 @@ export default defineConfig((config) =>({
       },
     ],
   },
+  server: {
+    port: 1473
+  }
 }));