pref: 代码打包优化

src/layouts/Admin.js

@@ -28,11 +28,12 @@ import PanelContent from 'components/Layout/PanelContent';
 import AdminNavbar from 'components/Navbars/AdminNavbar.js';
 import Sidebar from 'components/Sidebar/Sidebar.js';
 import { SidebarContext } from 'contexts/SidebarContext';
-import React, { useState } from 'react';
+import React, { useState, Suspense } from 'react';
 import 'react-quill/dist/quill.snow.css'; // ES6
 
 import { Route, Routes, Navigate } from "react-router-dom";
 import routes from 'routes.js';
+import PageLoader from 'components/Loading/PageLoader';
 
 import {
 	ArgonLogoDark,
@@ -98,7 +99,19 @@ export default function Dashboard(props) {
 	const getRoutes = (routes) => {
 		return routes.map((route, key) => {
 			if (route.layout === '/admin') {
-				return <Route  path={route.path} element={route.component} key={key} />
+				// ⚡ 懒加载组件需要包裹在 Suspense 中
+				const Component = route.component;
+				return (
+					<Route
+						path={route.path}
+						element={
+							<Suspense fallback={<PageLoader message="加载中..." />}>
+								<Component />
+							</Suspense>
+						}
+						key={key}
+					/>
+				);
 			}
 			if (route.collapse) {
 				return getRoutes(route.items);