feat: optimize initial load performance by implementing lazy loading and code splitting (#4445)

Author: nbb2025

web/src/router/index.tsx

@@ -1,23 +1,26 @@
+import { Suspense, lazy } from "react";
 import { createBrowserRouter } from "react-router-dom";
 import App from "@/App";
 import HomeLayout from "@/layouts/HomeLayout";
 import RootLayout from "@/layouts/RootLayout";
-import About from "@/pages/About";
-import AdminSignIn from "@/pages/AdminSignIn";
-import Archived from "@/pages/Archived";
-import AuthCallback from "@/pages/AuthCallback";
-import Explore from "@/pages/Explore";
 import Home from "@/pages/Home";
-import Inboxes from "@/pages/Inboxes";
-import MemoDetail from "@/pages/MemoDetail";
-import NotFound from "@/pages/NotFound";
-import PermissionDenied from "@/pages/PermissionDenied";
-import Resources from "@/pages/Resources";
-import Setting from "@/pages/Setting";
-import SignIn from "@/pages/SignIn";
-import SignUp from "@/pages/SignUp";
-import UserProfile from "@/pages/UserProfile";
-import MemoDetailRedirect from "./MemoDetailRedirect";
+import Loading from "@/pages/Loading";
+
+const About = lazy(() => import("@/pages/About"));
+const AdminSignIn = lazy(() => import("@/pages/AdminSignIn"));
+const Archived = lazy(() => import("@/pages/Archived"));
+const AuthCallback = lazy(() => import("@/pages/AuthCallback"));
+const Explore = lazy(() => import("@/pages/Explore"));
+const Inboxes = lazy(() => import("@/pages/Inboxes"));
+const MemoDetail = lazy(() => import("@/pages/MemoDetail"));
+const NotFound = lazy(() => import("@/pages/NotFound"));
+const PermissionDenied = lazy(() => import("@/pages/PermissionDenied"));
+const Resources = lazy(() => import("@/pages/Resources"));
+const Setting = lazy(() => import("@/pages/Setting"));
+const SignIn = lazy(() => import("@/pages/SignIn"));
+const SignUp = lazy(() => import("@/pages/SignUp"));
+const UserProfile = lazy(() => import("@/pages/UserProfile"));
+const MemoDetailRedirect = lazy(() => import("./MemoDetailRedirect"));
 
 export enum Routes {
   ROOT = "/",
@@ -40,19 +43,35 @@ const router = createBrowserRouter([
         children: [
           {
             path: "",
-            element: <SignIn />,
+            element: (
+              <Suspense fallback={<Loading />}>
+                <SignIn />
+              </Suspense>
+            ),
           },
           {
             path: "admin",
-            element: <AdminSignIn />,
+            element: (
+              <Suspense fallback={<Loading />}>
+                <AdminSignIn />
+              </Suspense>
+            ),
           },
           {
             path: "signup",
-            element: <SignUp />,
+            element: (
+              <Suspense fallback={<Loading />}>
+                <SignUp />
+              </Suspense>
+            ),
           },
           {
             path: "callback",
-            element: <AuthCallback />,
+            element: (
+              <Suspense fallback={<Loading />}>
+                <AuthCallback />
+              </Suspense>
+            ),
           },
         ],
       },
@@ -69,54 +88,102 @@ const router = createBrowserRouter([
               },
               {
                 path: Routes.EXPLORE,
-                element: <Explore />,
+                element: (
+                  <Suspense fallback={<Loading />}>
+                    <Explore />
+                  </Suspense>
+                ),
               },
               {
                 path: Routes.ARCHIVED,
-                element: <Archived />,
+                element: (
+                  <Suspense fallback={<Loading />}>
+                    <Archived />
+                  </Suspense>
+                ),
               },
               {
                 path: "u/:username",
-                element: <UserProfile />,
+                element: (
+                  <Suspense fallback={<Loading />}>
+                    <UserProfile />
+                  </Suspense>
+                ),
               },
             ],
           },
           {
             path: Routes.RESOURCES,
-            element: <Resources />,
+            element: (
+              <Suspense fallback={<Loading />}>
+                <Resources />
+              </Suspense>
+            ),
           },
           {
             path: Routes.INBOX,
-            element: <Inboxes />,
+            element: (
+              <Suspense fallback={<Loading />}>
+                <Inboxes />
+              </Suspense>
+            ),
           },
           {
             path: Routes.SETTING,
-            element: <Setting />,
+            element: (
+              <Suspense fallback={<Loading />}>
+                <Setting />
+              </Suspense>
+            ),
           },
           {
             path: "memos/:uid",
-            element: <MemoDetail />,
+            element: (
+              <Suspense fallback={<Loading />}>
+                <MemoDetail />
+              </Suspense>
+            ),
           },
           {
             path: Routes.ABOUT,
-            element: <About />,
+            element: (
+              <Suspense fallback={<Loading />}>
+                <About />
+              </Suspense>
+            ),
           },
           // Redirect old path to new path.
           {
             path: "m/:uid",
-            element: <MemoDetailRedirect />,
+            element: (
+              <Suspense fallback={<Loading />}>
+                <MemoDetailRedirect />
+              </Suspense>
+            ),
           },
           {
             path: "403",
-            element: <PermissionDenied />,
+            element: (
+              <Suspense fallback={<Loading />}>
+                <PermissionDenied />
+              </Suspense>
+            ),
           },
           {
             path: "404",
-            element: <NotFound />,
+            element: (
+              <Suspense fallback={<Loading />}>
+                <NotFound />
+              </Suspense>
+            ),
           },
           {
             path: "*",
-            element: <NotFound />,
+            element: (
+              <Suspense fallback={<Loading />}>
+                <NotFound />
+              </Suspense>
+            ),
           },
         ],
       },

web/vite.config.ts

@@ -44,8 +44,21 @@ export default defineConfig({
     rollupOptions: {
       output: {
         entryFileNames: "app.[hash].js",
-        chunkFileNames: "assets/chunk-vendors.[hash].js",
+        chunkFileNames: (chunkInfo) => {
+          const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split("/") : [];
+          const name = facadeModuleId[facadeModuleId.length - 2] || "[name]";
+          return `assets/${name}/[name].[hash].js`;
+        },
         assetFileNames: "assets/[name].[hash][extname]",
+        manualChunks: {
+          "react-vendor": ["react", "react-dom", "react-router-dom"],
+          "mui-vendor": ["@mui/joy", "@emotion/react", "@emotion/styled"],
+          "utils-vendor": ["dayjs", "lodash-es", "mobx", "mobx-react-lite"],
+          "katex-vendor": ["katex"],
+          "highlight-vendor": ["highlight.js"],
+          "mermaid-vendor": ["mermaid"],
+          "map-vendor": ["leaflet", "react-leaflet"],
+        },
       },
     },
   },