diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 2962807..57b8086 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -1,7 +1,9 @@
+import { Spin } from "@arco-design/web-react";
+import { Suspense } from "react";
 import { Route, Routes, useNavigate } from "react-router-dom";
 import "./assets/base.less";
 import Nav from "./components/Nav";
-import { routerList } from "./router";
+import { commonRouters, lazyRouters } from "./router";
 import { Guard } from "./router/Guard";
 
 function App() {
@@ -10,13 +12,24 @@ function App() {
       <Nav />
       <main>
         <Routes>
-          {routerList.map((router) => (
+          {commonRouters.map((router) => (
             <Route
               key={router.path}
               path={router.path}
               element={<Guard>{router.element}</Guard>}
             />
           ))}
+          {lazyRouters.map((router) => (
+            <Route
+              key={router.path}
+              path={router.path}
+              element={
+                <Suspense fallback={<Spin />}>
+                  <Guard>{<router.element />}</Guard>
+                </Suspense>
+              }
+            />
+          ))}
           <Route path="*" element={<span>404</span>} />
         </Routes>
       </main>
diff --git a/apps/web/src/components/Nav/index.tsx b/apps/web/src/components/Nav/index.tsx
index 0ae447f..83c152b 100644
--- a/apps/web/src/components/Nav/index.tsx
+++ b/apps/web/src/components/Nav/index.tsx
@@ -1,6 +1,6 @@
 import "./index.less";
 import { useNavigate } from "react-router-dom";
-import { routerList } from "../../router";
+import { commonRouters, menuRouters } from "../../router";
 import {
   Input,
   Modal,
@@ -58,7 +58,7 @@ function Nav() {
           <span>Backset</span>
         </div>
         <div className="middle">
-          {routerList.map(
+          {menuRouters.map(
             (route) =>
               !route.invisible && (
                 <span key={route.path} onClick={() => navigate(route.path)}>
diff --git a/apps/web/src/router/index.tsx b/apps/web/src/router/index.tsx
index fcd7c0f..1381579 100644
--- a/apps/web/src/router/index.tsx
+++ b/apps/web/src/router/index.tsx
@@ -1,28 +1,45 @@
+import { lazy } from "react";
 import Course from "../view/Course";
-import CourseDetail from "../view/CourseDetail";
-import Subscribe from "../view/Subscribe";
-import Topic from "../view/Topic";
 
-export const routerList = [
+export interface IRouteMenuItem {
+  path: string;
+  name: string;
+}
+
+interface IRoute extends IRouteMenuItem {
+  element: JSX.Element | any;
+  invisible?: boolean;
+}
+
+export const commonRouters: IRoute[] = [
   {
     path: "/",
     element: <Course />,
     name: "学习",
   },
+];
+
+export const lazyRouters: IRoute[] = [
   {
     path: "/topic",
-    element: <Topic />,
+    element: lazy(() => import("../view/Topic")),
     name: "讨论",
   },
   {
     path: "/subscribe",
-    element: <Subscribe />,
+    element: lazy(() => import("../view/Subscribe")),
     name: "订阅",
   },
   {
     path: "/course/detail/:id",
-    element: <CourseDetail />,
+    element: lazy(() => import("../view/CourseDetail")),
     name: "课程详情",
     invisible: true,
   },
 ];
+
+export const menuRouters = [...commonRouters, ...lazyRouters].map((route) => {
+  const { name, path } = route;
+  const invisible = "invisible" in route ? route.invisible : false;
+  return { name, path, invisible };
+});