pref: 代码打包优化

src/App.js

@@ -9,7 +9,7 @@
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Visionware.
  */
 
-import React from "react";
+import React, { Suspense } from "react";
 import { ChakraProvider } from '@chakra-ui/react';
 import { Routes, Route, Navigate } from "react-router-dom";
 
@@ -19,22 +19,27 @@ import { Box, useColorMode } from '@chakra-ui/react';
 // Core Components
 import theme from "theme/theme.js";
 
-// Layouts
+// Loading Component
+import PageLoader from "components/Loading/PageLoader";
+
+// Layouts - 保持同步导入（需要立即加载）
 import Admin from "layouts/Admin";
 import Auth from "layouts/Auth";
 import HomeLayout from "layouts/Home";
 
-// Views
-import Community from "views/Community";
-import LimitAnalyse from "views/LimitAnalyse";
-import ForecastReport from "views/Company/ForecastReport";
-import ConceptCenter from "views/Concept";
-import FinancialPanorama from "views/Company/FinancialPanorama";
-import CompanyIndex from "views/Company";
-import MarketDataView from "views/Company/MarketDataView";
-import StockOverview from "views/StockOverview";
-import EventDetail from "views/EventDetail";
-import TradingSimulation from "views/TradingSimulation";
+// ⚡ 使用 React.lazy() 实现路由懒加载
+// 首屏不需要的组件按需加载，大幅减少初始 JS 包大小
+const Community = React.lazy(() => import("views/Community"));
+const LimitAnalyse = React.lazy(() => import("views/LimitAnalyse"));
+const ForecastReport = React.lazy(() => import("views/Company/ForecastReport"));
+const ConceptCenter = React.lazy(() => import("views/Concept"));
+const FinancialPanorama = React.lazy(() => import("views/Company/FinancialPanorama"));
+const CompanyIndex = React.lazy(() => import("views/Company"));
+const MarketDataView = React.lazy(() => import("views/Company/MarketDataView"));
+const StockOverview = React.lazy(() => import("views/StockOverview"));
+const EventDetail = React.lazy(() => import("views/EventDetail"));
+const TradingSimulation = React.lazy(() => import("views/TradingSimulation"));
+
 // Contexts
 import { AuthProvider } from "contexts/AuthContext";
 
@@ -46,7 +51,9 @@ function AppContent() {
 
     return (
         <Box minH="100vh" bg={colorMode === 'dark' ? 'gray.800' : 'white'}>
-            <Routes>
+            {/* ⚡ Suspense 边界：懒加载组件加载时显示 Loading */}
+            <Suspense fallback={<PageLoader message="页面加载中..." />}>
+                <Routes>
                 {/* 首页路由 */}
                 <Route path="home/*" element={<HomeLayout />} />
 
@@ -139,6 +146,7 @@ function AppContent() {
                 {/* 404 页面 */}
                 <Route path="*" element={<Navigate to="/home" replace />} />
             </Routes>
+            </Suspense>
         </Box>
     );
 }