feat: optimize home page loading with lazy loading and improve card rendering logic

UPDATELOG.md

@@ -6,8 +6,10 @@
 
 ### 🚀 性能优化
 
-- 优化内存占用
+- 优化前端首页加载速度
-- 优化启动速度
+- 优化前端未使用 i18n 文件缓存呢
+- 优化后端内存占用
+- 优化后端启动速度
 
 ### 🐞 修复问题
 

src-tauri/Cargo.lock

@@ -1152,7 +1152,7 @@ dependencies = [
  "warp",
  "winapi",
  "winreg 0.55.0",
- "zip",
+ "zip 5.0.0",
 ]
 
 [[package]]
@@ -1391,6 +1391,21 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "crc"
+version = "3.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9710d3b3739c2e349eb44fe848ad0b7c8cb1e42bd87ee49371df2f7acaf3e675"
+dependencies = [
+ "crc-catalog",
+]
+
+[[package]]
+name = "crc-catalog"
+version = "2.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "19d374276b40fb8bbdee95aef7c7fa6b5316ec764510eb64b8dd0e2ed0d7e7f5"
+
 [[package]]
 name = "crc32fast"
 version = "1.5.0"
@@ -3829,26 +3844,6 @@ dependencies = [
  "windows-targets 0.53.3",
 ]
 
-[[package]]
-name = "liblzma"
-version = "0.4.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "10bf66f4598dc77ff96677c8e763655494f00ff9c1cf79e2eb5bb07bc31f807d"
-dependencies = [
- "liblzma-sys",
-]
-
-[[package]]
-name = "liblzma-sys"
-version = "0.4.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "01b9596486f6d60c3bbe644c0e1be1aa6ccc472ad630fe8927b456973d7cb736"
-dependencies = [
- "cc",
- "libc",
- "pkg-config",
-]
-
 [[package]]
 name = "libredox"
 version = "0.1.9"
@@ -3998,6 +3993,16 @@ version = "0.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "112b39cec0b298b6c1999fee3e31427f74f676e4cb9879ed1a121b43661a4154"
 
+[[package]]
+name = "lzma-rust2"
+version = "0.13.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c60a23ffb90d527e23192f1246b14746e2f7f071cb84476dd879071696c18a4a"
+dependencies = [
+ "crc",
+ "sha2 0.10.9",
+]
+
 [[package]]
 name = "mac"
 version = "0.1.1"
@@ -7370,7 +7375,7 @@ dependencies = [
  "tokio",
  "url",
  "windows-sys 0.60.2",
- "zip",
+ "zip 4.6.1",
 ]
 
 [[package]]
@@ -9798,6 +9803,18 @@ name = "zip"
 version = "4.6.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "caa8cd6af31c3b31c6631b8f483848b91589021b28fffe50adada48d4f4d2ed1"
+dependencies = [
+ "arbitrary",
+ "crc32fast",
+ "indexmap 2.11.0",
+ "memchr",
+]
+
+[[package]]
+name = "zip"
+version = "5.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9fdfa5f34b5980f2c21b3a2c68c09ade4debddc7be52c51056695effc73a08c"
 dependencies = [
  "aes",
  "arbitrary",
@@ -9809,7 +9826,7 @@ dependencies = [
  "getrandom 0.3.3",
  "hmac",
  "indexmap 2.11.0",
- "liblzma",
+ "lzma-rust2",
  "memchr",
  "pbkdf2",
  "ppmd-rust",

src/pages/home.tsx

@@ -12,6 +12,7 @@ import {
   Checkbox,
   Tooltip,
   Grid,
+  Skeleton,
 } from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
 import { useProfiles } from "@/hooks/use-profiles";
@@ -26,17 +27,34 @@ import {
 import { ProxyTunCard } from "@/components/home/proxy-tun-card";
 import { ClashModeCard } from "@/components/home/clash-mode-card";
 import { EnhancedTrafficStats } from "@/components/home/enhanced-traffic-stats";
-import { useState } from "react";
+import { useState, useMemo, Suspense, lazy, useCallback } from "react";
 import { HomeProfileCard } from "@/components/home/home-profile-card";
 import { EnhancedCard } from "@/components/home/enhanced-card";
 import { CurrentProxyCard } from "@/components/home/current-proxy-card";
 import { BasePage } from "@/components/base";
-import { ClashInfoCard } from "@/components/home/clash-info-card";
-import { SystemInfoCard } from "@/components/home/system-info-card";
 import { useLockFn } from "ahooks";
 import { entry_lightweight_mode, openWebUrl } from "@/services/cmds";
-import { TestCard } from "@/components/home/test-card";
+
-import { IpInfoCard } from "@/components/home/ip-info-card";
+const LazyTestCard = lazy(() =>
+  import("@/components/home/test-card").then((module) => ({
+    default: module.TestCard,
+  })),
+);
+const LazyIpInfoCard = lazy(() =>
+  import("@/components/home/ip-info-card").then((module) => ({
+    default: module.IpInfoCard,
+  })),
+);
+const LazyClashInfoCard = lazy(() =>
+  import("@/components/home/clash-info-card").then((module) => ({
+    default: module.ClashInfoCard,
+  })),
+);
+const LazySystemInfoCard = lazy(() =>
+  import("@/components/home/system-info-card").then((module) => ({
+    default: module.SystemInfoCard,
+  })),
+);
 
 // 定义首页卡片设置接口
 interface HomeCardsSettings {
@@ -190,9 +208,11 @@ export const HomePage = () => {
 
   // 设置弹窗的状态
   const [settingsOpen, setSettingsOpen] = useState(false);
+
   // 卡片显示状态
-  const [homeCards, setHomeCards] = useState<HomeCardsSettings>(
+  const defaultCards = useMemo<HomeCardsSettings>(
-    (verge?.home_cards as HomeCardsSettings) || {
+    () => ({
+      info: false,
       profile: true,
       proxy: true,
       network: true,
@@ -202,18 +222,49 @@ export const HomePage = () => {
       systeminfo: true,
       test: true,
       ip: true,
-    },
+    }),
+    [],
   );
 
+  const [homeCards, setHomeCards] = useState<HomeCardsSettings>(() => {
+    return (verge?.home_cards as HomeCardsSettings) || defaultCards;
+  });
+
   // 文档链接函数
   const toGithubDoc = useLockFn(() => {
     return openWebUrl("https://clash-verge-rev.github.io/index.html");
   });
 
   // 新增：打开设置弹窗
-  const openSettings = () => {
+  const openSettings = useCallback(() => {
     setSettingsOpen(true);
-  };
+  }, []);
+
+  const renderCard = useCallback(
+    (cardKey: string, component: React.ReactNode, size: number = 6) => {
+      if (!homeCards[cardKey]) return null;
+
+      return (
+        <Grid size={size} key={cardKey}>
+          {component}
+        </Grid>
+      );
+    },
+    [homeCards],
+  );
+
+  const criticalCards = useMemo(
+    () => [
+      renderCard(
+        "profile",
+        <HomeProfileCard current={current} onProfileUpdated={mutateProfiles} />,
+      ),
+      renderCard("proxy", <CurrentProxyCard />),
+      renderCard("network", <NetworkSettingsCard />),
+      renderCard("mode", <ClashModeEnhancedCard />),
+    ],
+    [homeCards, current, mutateProfiles, renderCard],
+  );
 
   // 新增：保存设置时用requestIdleCallback/setTimeout
   const handleSaveSettings = (newCards: HomeCardsSettings) => {
@@ -224,6 +275,47 @@ export const HomePage = () => {
     }
   };
 
+  const nonCriticalCards = useMemo(
+    () => [
+      renderCard(
+        "traffic",
+        <EnhancedCard
+          title={t("Traffic Stats")}
+          icon={<SpeedOutlined />}
+          iconColor="secondary"
+        >
+          <EnhancedTrafficStats />
+        </EnhancedCard>,
+        12,
+      ),
+      renderCard(
+        "test",
+        <Suspense fallback={<Skeleton variant="rectangular" height={200} />}>
+          <LazyTestCard />
+        </Suspense>,
+      ),
+      renderCard(
+        "ip",
+        <Suspense fallback={<Skeleton variant="rectangular" height={200} />}>
+          <LazyIpInfoCard />
+        </Suspense>,
+      ),
+      renderCard(
+        "clashinfo",
+        <Suspense fallback={<Skeleton variant="rectangular" height={200} />}>
+          <LazyClashInfoCard />
+        </Suspense>,
+      ),
+      renderCard(
+        "systeminfo",
+        <Suspense fallback={<Skeleton variant="rectangular" height={200} />}>
+          <LazySystemInfoCard />
+        </Suspense>,
+      ),
+    ],
+    [homeCards, t, renderCard],
+  );
+
   return (
     <BasePage
       title={t("Label-Home")}
@@ -253,71 +345,9 @@ export const HomePage = () => {
       }
     >
       <Grid container spacing={1.5} columns={{ xs: 6, sm: 6, md: 12 }}>
-        {/* 订阅和当前节点部分 */}
+        {criticalCards}
-        {homeCards.profile && (
-          <Grid size={6}>
-            <HomeProfileCard
-              current={current}
-              onProfileUpdated={mutateProfiles}
-            />
-          </Grid>
-        )}
 
-        {homeCards.proxy && (
+        {nonCriticalCards}
-          <Grid size={6}>
-            <CurrentProxyCard />
-          </Grid>
-        )}
-
-        {/* 代理和网络设置区域 */}
-        {homeCards.network && (
-          <Grid size={6}>
-            <NetworkSettingsCard />
-          </Grid>
-        )}
-
-        {homeCards.mode && (
-          <Grid size={6}>
-            <ClashModeEnhancedCard />
-          </Grid>
-        )}
-
-        {/* 增强的流量统计区域 */}
-        {homeCards.traffic && (
-          <Grid size={12}>
-            <EnhancedCard
-              title={t("Traffic Stats")}
-              icon={<SpeedOutlined />}
-              iconColor="secondary"
-            >
-              <EnhancedTrafficStats />
-            </EnhancedCard>
-          </Grid>
-        )}
-        {/* 测试网站部分 */}
-        {homeCards.test && (
-          <Grid size={6}>
-            <TestCard />
-          </Grid>
-        )}
-        {/* IP信息卡片 */}
-        {homeCards.ip && (
-          <Grid size={6}>
-            <IpInfoCard />
-          </Grid>
-        )}
-        {/* Clash信息 */}
-        {homeCards.clashinfo && (
-          <Grid size={6}>
-            <ClashInfoCard />
-          </Grid>
-        )}
-        {/* 系统信息 */}
-        {homeCards.systeminfo && (
-          <Grid size={6}>
-            <SystemInfoCard />
-          </Grid>
-        )}
       </Grid>
 
       {/* 首页设置弹窗 */}