pref: 代码打包优化

src/routes.js

@@ -15,9 +15,9 @@
 
 */
 
-// import
-// To be changed
-// import Tables from "views/Dashboard/Tables.js";
+// ⚡ 使用 React.lazy() 实现路由懒加载
+// 按需加载组件，大幅减少初始 JS 包大小
+import React from "react";
 import {
   CartIcon,
   DocumentIcon,
@@ -25,71 +25,64 @@ import {
   PersonIcon,
   StatsIcon,
 } from "components/Icons/Icons";
-import Calendar from "views/Applications/Calendar";
-import DataTables from "views/Applications/DataTables";
-import Kanban from "views/Applications/Kanban.js";
-import Wizard from "views/Applications/Wizard.js";
-import SignInBasic from "views/Authentication/SignIn/SignInBasic.js";
-import SignInCover from "views/Authentication/SignIn/SignInCover.js";
-import SignInIllustration from "views/Authentication/SignIn/SignInIllustration.js";
-import LockBasic from "views/Authentication/Lock/LockBasic.js";
-import LockCover from "views/Authentication/Lock/LockCover.js";
-import LockIllustration from "views/Authentication/Lock/LockIllustration.js";
-import ResetBasic from "views/Authentication/Reset/ResetBasic.js";
-import ResetCover from "views/Authentication/Reset/ResetCover.js";
-import ResetIllustration from "views/Authentication/Reset/ResetIllustration.js";
-import VerificationBasic from "views/Authentication/Verification/VerificationBasic.js";
-import VerificationCover from "views/Authentication/Verification/VerificationCover.js";
-import VerificationIllustration from "views/Authentication/Verification/VerificationIllustration.js";
-import SignUpBasic from "views/Authentication/SignUp/SignUpBasic.js";
-import SignUpCover from "views/Authentication/SignUp/SignUpCover.js";
-import SignUpIllustration from "views/Authentication/SignUp/SignUpIllustration.js";
-import Automotive from "views/Dashboard/Automotive";
-import CRM from "views/Dashboard/CRM.js";
-import Default from "views/Dashboard/Default.js";
-import Landing from "views/Dashboard/Landing.js";
-import OrderDetails from "views/Ecommerce/Orders/OrderDetails";
-import OrderList from "views/Ecommerce/Orders/OrderList";
-import EditProduct from "views/Ecommerce/Products/EditProduct";
-import NewProduct from "views/Ecommerce/Products/NewProduct";
-import ProductPage from "views/Ecommerce/Products/ProductPage";
-import Billing from "views/Pages/Account/Billing.js";
-import Subscription from "views/Pages/Account/Subscription.js";
-import Invoice from "views/Pages/Account/Invoice.js";
-import Settings from "views/Pages/Account/Settings.js";
-import Alerts from "views/Pages/Alerts";
-import Charts from "views/Pages/Charts.js";
-import Pricing from "views/Pages/Pricing.js";
-import Overview from "views/Pages/Profile/Overview.js";
-import Projects from "views/Pages/Profile/Projects.js";
-import Teams from "views/Pages/Profile/Teams.js";
-import General from "views/Pages/Projects/General.js";
-import Timeline from "views/Pages/Projects/Timeline.js";
-import RTLPage from "views/Pages/RTLPage.js";
-import NewUser from "views/Pages/Users/NewUser.js";
-import Reports from "views/Pages/Users/Reports.js";
-import Widgets from "views/Pages/Widgets.js";
-import SmartHome from "views/Dashboard/SmartHome";
-// 在现有导入语句后添加
-import EventHeader from "views/EventDetail/components/EventHeader";
-import HistoricalEvents from "views/EventDetail/components/HistoricalEvents";
-import RelatedConcepts from "views/EventDetail/components/RelatedConcepts";
-import RelatedStocks from "views/EventDetail/components/RelatedStocks";
-import ConceptCenter from "views/Concept";
-import ProfilePage from "views/Profile/ProfilePage";
-import SettingsPage from "views/Settings/SettingsPage";
-// 如果有主入口文件，也需要导入
-// EventDetail 将通过顶级路由访问，不再在 Admin 下注册
-// 导入涨停分析组件
-import LimitAnalyse from "views/LimitAnalyse";
-// 导入Community页面
-import Community from "views/Community";
-import ForecastReport from "views/Company/ForecastReport";
-import FinancialPanorama from "views/Company/FinancialPanorama";
-import CompanyIndex from "views/Company";
-import MarketDataView from "views/Company/MarketDataView";
-import StockOverview from "views/StockOverview";
-import TradingSimulation from "views/TradingSimulation";
+
+// ⚡ 懒加载所有页面组件
+const Calendar = React.lazy(() => import("views/Applications/Calendar"));
+const DataTables = React.lazy(() => import("views/Applications/DataTables"));
+const Kanban = React.lazy(() => import("views/Applications/Kanban.js"));
+const Wizard = React.lazy(() => import("views/Applications/Wizard.js"));
+const SignInBasic = React.lazy(() => import("views/Authentication/SignIn/SignInBasic.js"));
+const SignInCover = React.lazy(() => import("views/Authentication/SignIn/SignInCover.js"));
+const SignInIllustration = React.lazy(() => import("views/Authentication/SignIn/SignInIllustration.js"));
+const LockBasic = React.lazy(() => import("views/Authentication/Lock/LockBasic.js"));
+const LockCover = React.lazy(() => import("views/Authentication/Lock/LockCover.js"));
+const LockIllustration = React.lazy(() => import("views/Authentication/Lock/LockIllustration.js"));
+const ResetBasic = React.lazy(() => import("views/Authentication/Reset/ResetBasic.js"));
+const ResetCover = React.lazy(() => import("views/Authentication/Reset/ResetCover.js"));
+const ResetIllustration = React.lazy(() => import("views/Authentication/Reset/ResetIllustration.js"));
+const VerificationBasic = React.lazy(() => import("views/Authentication/Verification/VerificationBasic.js"));
+const VerificationCover = React.lazy(() => import("views/Authentication/Verification/VerificationCover.js"));
+const VerificationIllustration = React.lazy(() => import("views/Authentication/Verification/VerificationIllustration.js"));
+const SignUpBasic = React.lazy(() => import("views/Authentication/SignUp/SignUpBasic.js"));
+const SignUpCover = React.lazy(() => import("views/Authentication/SignUp/SignUpCover.js"));
+const SignUpIllustration = React.lazy(() => import("views/Authentication/SignUp/SignUpIllustration.js"));
+const Automotive = React.lazy(() => import("views/Dashboard/Automotive"));
+const CRM = React.lazy(() => import("views/Dashboard/CRM.js"));
+const Default = React.lazy(() => import("views/Dashboard/Default.js"));
+const Landing = React.lazy(() => import("views/Dashboard/Landing.js"));
+const OrderDetails = React.lazy(() => import("views/Ecommerce/Orders/OrderDetails"));
+const OrderList = React.lazy(() => import("views/Ecommerce/Orders/OrderList"));
+const EditProduct = React.lazy(() => import("views/Ecommerce/Products/EditProduct"));
+const NewProduct = React.lazy(() => import("views/Ecommerce/Products/NewProduct"));
+const ProductPage = React.lazy(() => import("views/Ecommerce/Products/ProductPage"));
+const Billing = React.lazy(() => import("views/Pages/Account/Billing.js"));
+const Subscription = React.lazy(() => import("views/Pages/Account/Subscription.js"));
+const Invoice = React.lazy(() => import("views/Pages/Account/Invoice.js"));
+const Settings = React.lazy(() => import("views/Pages/Account/Settings.js"));
+const Alerts = React.lazy(() => import("views/Pages/Alerts"));
+const Charts = React.lazy(() => import("views/Pages/Charts.js"));
+const Pricing = React.lazy(() => import("views/Pages/Pricing.js"));
+const Overview = React.lazy(() => import("views/Pages/Profile/Overview.js"));
+const Projects = React.lazy(() => import("views/Pages/Profile/Projects.js"));
+const Teams = React.lazy(() => import("views/Pages/Profile/Teams.js"));
+const General = React.lazy(() => import("views/Pages/Projects/General.js"));
+const Timeline = React.lazy(() => import("views/Pages/Projects/Timeline.js"));
+const RTLPage = React.lazy(() => import("views/Pages/RTLPage.js"));
+const NewUser = React.lazy(() => import("views/Pages/Users/NewUser.js"));
+const Reports = React.lazy(() => import("views/Pages/Users/Reports.js"));
+const Widgets = React.lazy(() => import("views/Pages/Widgets.js"));
+const SmartHome = React.lazy(() => import("views/Dashboard/SmartHome"));
+const ConceptCenter = React.lazy(() => import("views/Concept"));
+const ProfilePage = React.lazy(() => import("views/Profile/ProfilePage"));
+const SettingsPage = React.lazy(() => import("views/Settings/SettingsPage"));
+const LimitAnalyse = React.lazy(() => import("views/LimitAnalyse"));
+const Community = React.lazy(() => import("views/Community"));
+const ForecastReport = React.lazy(() => import("views/Company/ForecastReport"));
+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 TradingSimulation = React.lazy(() => import("views/TradingSimulation"));
 const dashRoutes = [
   {
     name: "Dashboard",
@@ -101,31 +94,31 @@ const dashRoutes = [
       {
         name: "Landing Page",
         path: "/dashboard/landing",
-        component: <Landing/>,
+        component: Landing,
         layout: "/landing",
       },
       {
         name: "Default",
         path: "/dashboard/default",
-        component: <Default/>,
+        component: Default,
         layout: "/admin",
       },
       {
         name: "Automotive",
         path: "/dashboard/automotive",
-        component: <Automotive/>,
+        component: Automotive,
         layout: "/admin",
       },
       {
         name: "Smart Home",
         path: "/dashboard/smart-home",
-        component: <SmartHome/>,
+        component: SmartHome,
         layout: "/admin",
       },
       {
         name: "CRM",
         path: "/dashboard/crm",
-        component: <CRM/>,
+        component: CRM,
         layout: "/admin",
       },
     ],
@@ -140,37 +133,37 @@ const dashRoutes = [
       {
         name: "股票概览",
         path: "/stock-analysis/overview",
-        component: <StockOverview/>,
+        component: StockOverview,
         layout: "/admin",
       },
       {
         name: "个股信息",
         path: "/stock-analysis/company",
-        component: <CompanyIndex/>,
+        component: CompanyIndex,
         layout: "/admin",
       },
       {
         name: "股票行情",
         path: "/stock-analysis/market-data",
-        component: <MarketDataView/>,
+        component: MarketDataView,
         layout: "/admin",
       },
       {
         name: "涨停分析",
         path: "/stock-analysis/limit-analyse",
-        component: <LimitAnalyse/>,
+        component: LimitAnalyse,
         layout: "/admin",
       },
       {
         name: "盈利预测报表",
         path: "/stock-analysis/forecast-report",
-        component: <ForecastReport/>,
+        component: ForecastReport,
         layout: "/admin",
       },
       {
         name: "盈利预测报表",
         path: "/stock-analysis/Financial-report",
-        component: <FinancialPanorama/>,
+        component: FinancialPanorama,
         layout: "/admin",
       },
     ],
@@ -181,7 +174,7 @@ const dashRoutes = [
     icon: <StatsIcon color="inherit" />,  // 或者使用其他图标
     authIcon: <StatsIcon color="inherit" />,
     collapse: false,
-    component: <ConceptCenter/>,
+    component: ConceptCenter,
     layout: "/admin",
   },
   {
@@ -190,7 +183,7 @@ const dashRoutes = [
     icon: <StatsIcon color="inherit" />,
     authIcon: <StatsIcon color="inherit" />,
     collapse: false,
-    component: <Community/>,
+    component: Community,
     layout: "/admin",
   },
   {
@@ -199,14 +192,14 @@ const dashRoutes = [
     icon: <CartIcon color="inherit" />,
     authIcon: <CartIcon color="inherit" />,
     collapse: false,
-    component: <TradingSimulation/>,
+    component: TradingSimulation,
     layout: "/home",
   },
   {
     name: "个人资料",
     path: "/profile",
     icon: <PersonIcon color="inherit" />,
-    component: <ProfilePage/>,
+    component: ProfilePage,
     layout: "/admin",
     invisible: true, // 不在侧边栏显示
   },
@@ -214,7 +207,7 @@ const dashRoutes = [
     name: "账户设置",
     path: "/settings",
     icon: <StatsIcon color="inherit" />,
-    component: <SettingsPage/>,
+    component: SettingsPage,
     layout: "/admin",
     invisible: true, // 不在侧边栏显示
   },
@@ -238,21 +231,21 @@ const dashRoutes = [
                 name: "Profile Overview",
                 secondaryNavbar: true,
                 path: "/pages/profile/overview",
-                component: <Overview/>,
+                component: Overview,
                 layout: "/admin",
               },
               {
                 name: "Teams",
                 secondaryNavbar: true,
                 path: "/pages/profile/teams",
-                component: <Teams/>,
+                component: Teams,
                 layout: "/admin",
               },
               {
                 name: "All Projects",
                 secondaryNavbar: true,
                 path: "/pages/profile/profile-projects",
-                component: <Projects/>,
+                component: Projects,
                 layout: "/admin",
               },
             ],
@@ -266,13 +259,13 @@ const dashRoutes = [
               {
                 name: "Reports",
                 path: "/pages/users/reports",
-                component: <Reports/>,
+                component: Reports,
                 layout: "/admin",
               },
               {
                 name: "New User",
                 path: "/pages/users/new-user",
-                component: <NewUser/>,
+                component: NewUser,
                 layout: "/admin",
               },
             ],
@@ -286,24 +279,24 @@ const dashRoutes = [
               {
                 name: "Settings",
                 path: "/pages/account/settings",
-                component: <Settings/>,
+                component: Settings,
                 layout: "/admin",
               },
               {
                 name: "Billing",
-                component: <Billing/>,
+                component: Billing,
                 path: "/pages/account/billing",
                 layout: "/admin",
               },
               {
                 name: "Subscription",
-                component: <Subscription/>,
+                component: Subscription,
                 path: "/pages/account/subscription",
                 layout: "/home",
               },
               {
                 name: "Invoice",
-                component: <Invoice/>,
+                component: Invoice,
                 path: "/pages/account/invoice",
                 layout: "/admin",
               },
@@ -318,45 +311,45 @@ const dashRoutes = [
               {
                 name: "General",
                 path: "/pages/projects/general",
-                component: <General/>,
+                component: General,
                 layout: "/admin",
               },
               {
                 name: "Timeline",
                 path: "/pages/projects/timeline",
-                component: <Timeline/>,
+                component: Timeline,
                 layout: "/admin",
               },
             ],
           },
           {
             name: "Pricing Page",
-            component: <Pricing/>,
+            component: Pricing,
             path: "/pages/pricing-page",
             layout: "/auth",
           },
           {
             name: "RTL",
-            component: <RTLPage/>,
+            component: RTLPage,
             path: "/pages/rtl-support-page",
             layout: "/rtl",
           },
           {
             name: "Widgets",
-            component: <Widgets/>,
+            component: Widgets,
             path: "/pages/widgets",
             layout: "/admin",
           },
           {
             name: "Charts",
-            component: <Charts/>,
+            component: Charts,
             path: "/pages/charts",
             layout: "/admin",
           },
           {
             name: "Alerts",
             path: "/pages/alerts",
-            component: <Alerts/>,
+            component: Alerts,
             layout: "/admin",
           },
         ],
@@ -369,14 +362,14 @@ const dashRoutes = [
         items: [
           {
             name: "Kanban",
-            component: <Kanban/>,
+            component: Kanban,
             authIcon: <DocumentIcon color="inherit" />,
             path: "/applications/kanban",
             layout: "/admin",
           },
           {
             name: "Wizard",
-            component: <Wizard/>,
+            component: Wizard,
             authIcon: <CartIcon color="inherit" />,
             path: "/applications/wizard",
             layout: "/admin",
@@ -385,12 +378,12 @@ const dashRoutes = [
             name: "Data Tables",
             path: "/applications/data-tables",
             authIcon: <PersonIcon color="inherit" />,
-            component: <DataTables/>,
+            component: DataTables,
             layout: "/admin",
           },
           {
             name: "Calendar",
-            component: <Calendar/>,
+            component: Calendar,
             authIcon: <StatsIcon color="inherit" />,
             path: "/applications/calendar",
             layout: "/admin",
@@ -411,20 +404,20 @@ const dashRoutes = [
             items: [
               {
                 name: "New Product",
-                component: <NewProduct/>,
+                component: NewProduct,
                 secondaryNavbar: true,
                 path: "/ecommerce/products/new-product",
                 layout: "/admin",
               },
               {
                 name: "Edit Product",
-                component: <EditProduct/>,
+                component: EditProduct,
                 path: "/ecommerce/products/edit-product",
                 layout: "/admin",
               },
               {
                 name: "Product Page",
-                component: <ProductPage/>,
+                component: ProductPage,
                 path: "/ecommerce/products/product-page",
                 layout: "/admin",
               },
@@ -438,13 +431,13 @@ const dashRoutes = [
             items: [
               {
                 name: "Order List",
-                component: <OrderList/>,
+                component: OrderList,
                 path: "/ecommerce/orders/order-list",
                 layout: "/admin",
               },
               {
                 name: "Order Details",
-                component: <OrderDetails/>,
+                component: OrderDetails,
                 path: "/ecommerce/orders/order-details",
                 layout: "/admin",
               },
@@ -466,19 +459,19 @@ const dashRoutes = [
             items: [
               {
                 name: "Basic",
-                component: <SignInBasic/>,
+                component: SignInBasic,
                 path: "/authentication/sign-in/basic",
                 layout: "/auth",
               },
               {
                 name: "Cover",
-                component: <SignInCover/>,
+                component: SignInCover,
                 path: "/authentication/sign-in/cover",
                 layout: "/auth",
               },
               {
                 name: "Illustration",
-                component: <SignInIllustration/>,
+                component: SignInIllustration,
                 secondaryNavbar: true,
                 path: "/authentication/sign-in/illustration",
                 layout: "/auth",
@@ -493,20 +486,20 @@ const dashRoutes = [
             items: [
               {
                 name: "Basic",
-                component: <SignUpBasic/>,
+                component: SignUpBasic,
                 path: "/authentication/sign-up/basic",
                 layout: "/auth",
               },
               {
                 name: "Cover",
-                component: <SignUpCover/>,
+                component: SignUpCover,
                 path: "/authentication/sign-up/cover",
                 layout: "/auth",
               },
               {
                 name: "Illustration",
                 secondaryNavbar: true,
-                component: <SignUpIllustration/>,
+                component: SignUpIllustration,
                 path: "/authentication/sign-up/illustration",
                 layout: "/auth",
               },
@@ -520,20 +513,20 @@ const dashRoutes = [
             items: [
               {
                 name: "Basic",
-                component: <ResetBasic/>,
+                component: ResetBasic,
                 path: "/authentication/reset/basic",
                 layout: "/auth",
               },
               {
                 name: "Cover",
-                component: <ResetCover/>,
+                component: ResetCover,
                 path: "/authentication/reset/cover",
                 layout: "/auth",
               },
               {
                 name: "Illustration",
                 secondaryNavbar: true,
-                component: <ResetIllustration/>,
+                component: ResetIllustration,
                 path: "/authentication/reset/illustration",
                 layout: "/auth",
               },
@@ -547,20 +540,20 @@ const dashRoutes = [
             items: [
               {
                 name: "Basic",
-                component: <LockBasic/>,
+                component: LockBasic,
                 path: "/authentication/lock/basic",
                 layout: "/auth",
               },
               {
                 name: "Cover",
-                component: <LockCover/>,
+                component: LockCover,
                 path: "/authentication/lock/cover",
                 layout: "/auth",
               },
               {
                 name: "Illustration",
                 secondaryNavbar: true,
-                component: <LockIllustration/>,
+                component: LockIllustration,
                 path: "/authentication/lock/illustration",
                 layout: "/auth",
               },
@@ -574,20 +567,20 @@ const dashRoutes = [
             items: [
               {
                 name: "Basic",
-                component: <VerificationBasic/>,
+                component: VerificationBasic,
                 path: "/authentication/verification/basic",
                 layout: "/auth",
               },
               {
                 name: "Cover",
-                component: <VerificationCover/>,
+                component: VerificationCover,
                 path: "/authentication/verification/cover",
                 layout: "/auth",
               },
               {
                 name: "Illustration",
                 secondaryNavbar: true,
-                component: <VerificationIllustration/>,
+                component: VerificationIllustration,
                 path: "/authentication/verification/illustration",
                 layout: "/auth",
               },