duxingchen/track
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf(frontend): 路由级代码分割 — React.lazy + Suspense

Browse Source 
将所有页面组件改为按路由懒加载，Layout 组件保持静态导入。
新增 LoadingSpinner 作为 Suspense 回退组件。
html5-qrcode (~200KB) 和 antd 仅在访问扫码/管理后台路由时加载。
This commit is contained in:
duxingchen
2026-08-06 17:33:48 +08:00
parent 6a79e21302
commit 9d204a57d8
2 changed files with 48 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/App.tsx
View File

@ -1,20 +1,26 @@
import { Suspense, lazy } from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import { App as AntApp } from "antd"; import { App as AntApp } from "antd";
import { ToastProvider } from "./components/ui/Toast"; import { ToastProvider } from "./components/ui/Toast";
import { AuthProvider } from "./contexts/AuthContext"; import { AuthProvider } from "./contexts/AuthContext";
import AppLayout from "./components/layout/AppLayout"; import LoadingSpinner from "./components/ui/LoadingSpinner";
import ScanPage from "./pages/ScanPage";
import MyTasksPage from "./pages/MyTasksPage";
import NotificationsPage from "./pages/NotificationsPage";
import ProfilePage from "./pages/ProfilePage";
// Layout 组件静态导入（始终需要，体积小）
import AppLayout from "./components/layout/AppLayout";
import AdminLayout from "./components/layout/AdminLayout"; import AdminLayout from "./components/layout/AdminLayout";
import AdminLoginPage from "./pages/admin/AdminLoginPage";
import AdminDashboard from "./pages/admin/AdminDashboard"; // 🚀 路由级代码分割 — 按需懒加载页面组件
import AdminProductsPage from "./pages/admin/AdminProductsPage"; const ScanPage = lazy(() => import("./pages/ScanPage"));
import AdminTasksPage from "./pages/admin/AdminTasksPage"; const MyTasksPage = lazy(() => import("./pages/MyTasksPage"));
import AdminPrintConfigPage from "./pages/admin/AdminPrintConfigPage"; const NotificationsPage = lazy(() => import("./pages/NotificationsPage"));
const ProfilePage = lazy(() => import("./pages/ProfilePage"));
const AdminLoginPage = lazy(() => import("./pages/admin/AdminLoginPage"));
const AdminDashboard = lazy(() => import("./pages/admin/AdminDashboard"));
const AdminProductsPage = lazy(() => import("./pages/admin/AdminProductsPage"));
const AdminTasksPage = lazy(() => import("./pages/admin/AdminTasksPage"));
const AdminPrintConfigPage = lazy(() => import("./pages/admin/AdminPrintConfigPage"));
export default function App() { export default function App() {
return ( return (
@ -22,28 +28,30 @@ export default function App() {
<ToastProvider> <ToastProvider>
<AuthProvider> <AuthProvider>
<BrowserRouter> <BrowserRouter>
<Routes> <Suspense fallback={<LoadingSpinner />}>
{/* 移动端 */} <Routes>
<Route path="/" element={<Navigate to="/scan" replace />} /> {/* 移动端 */}
<Route element={<AppLayout />}> <Route path="/" element={<Navigate to="/admin/dashboard" replace />} />
<Route path="/scan" element={<ScanPage />} /> <Route element={<AppLayout />}>
<Route path="/tasks" element={<MyTasksPage />} /> <Route path="/scan" element={<ScanPage />} />
<Route path="/notifications" element={<NotificationsPage />} /> <Route path="/tasks" element={<MyTasksPage />} />
<Route path="/profile" element={<ProfilePage />} /> <Route path="/notifications" element={<NotificationsPage />} />
</Route> <Route path="/profile" element={<ProfilePage />} />
</Route>
{/* PC 管理端 — 登录页（独立，无侧边栏） */} {/* PC 管理端 — 登录页（独立，无侧边栏） */}
<Route path="/admin/login" element={<AdminLoginPage />} /> <Route path="/admin/login" element={<AdminLoginPage />} />
{/* PC 管理端 — 需要登录 */} {/* PC 管理端 — 需要登录 */}
<Route path="/admin" element={<Navigate to="/admin/dashboard" replace />} /> <Route path="/admin" element={<Navigate to="/admin/dashboard" replace />} />
<Route element={<AdminLayout />}> <Route element={<AdminLayout />}>
<Route path="/admin/dashboard" element={<AdminDashboard />} /> <Route path="/admin/dashboard" element={<AdminDashboard />} />
<Route path="/admin/products" element={<AdminProductsPage />} /> <Route path="/admin/products" element={<AdminProductsPage />} />
<Route path="/admin/tasks" element={<AdminTasksPage />} /> <Route path="/admin/tasks" element={<AdminTasksPage />} />
<Route path="/admin/print-config" element={<AdminPrintConfigPage />} /> <Route path="/admin/print-config" element={<AdminPrintConfigPage />} />
</Route> </Route>
</Routes> </Routes>
</Suspense>
</BrowserRouter> </BrowserRouter>
</AuthProvider> </AuthProvider>
</ToastProvider> </ToastProvider>

10
frontend/src/components/ui/LoadingSpinner.tsx Normal file
View File

@ -0,0 +1,10 @@
import { Loader2 } from "lucide-react";
/** 全局路由懒加载回退组件 */
export default function LoadingSpinner() {
return (
<div className="flex items-center justify-center py-32">
<Loader2 className="h-8 w-8 animate-spin text-blue-500" />
</div>
);
}