refactor(app): 优化应用加载性能

- 将桌面端模态框组件提取为独立模块 desktop-modal-host.tsx
- 将移动端模态框组件提取为独立模块 mobile-modal-host.tsx
- 使用懒加载和 Suspense 包装入口页面和模态框组件
- 将 React Query Devtools 改为按需加载
- 配置 Vite 构建优化，设置第三方库分包策略
- 替换 lottie-web 为轻量级版本以减少包体积

src/main.tsx

@@ -1,7 +1,6 @@
 import { QueryClientProvider } from '@tanstack/react-query'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { RouterProvider } from '@tanstack/react-router'
-import { StrictMode } from 'react'
+import { lazy, StrictMode, Suspense } from 'react'
 import { createRoot } from 'react-dom/client'
 import { getCurrentUserProfile, refreshAuthSession } from '@/api'
 import { AppBootResourceGate } from '@/components/app-boot-resource-gate'
@@ -23,6 +22,15 @@ const rootElement = document.getElementById(APP_ROOT_ELEMENT_ID)
 const shouldShowQueryDevtools =
   import.meta.env.VITE_APP_ENV === 'development' &&
   import.meta.env.VITE_ENABLE_QUERY_DEVTOOLS === 'true'
+const QueryDevtools = shouldShowQueryDevtools
+  ? lazy(async () => {
+      const { ReactQueryDevtools } = await import(
+        '@tanstack/react-query-devtools'
+      )
+
+      return { default: ReactQueryDevtools }
+    })
+  : null
 
 if (!rootElement) {
   throw new Error('Root element not found')
@@ -46,8 +54,10 @@ createRoot(rootElement).render(
         <GlobalAudioController />
         <RouterProvider router={router} />
         <AppNotificationAlert />
-        {shouldShowQueryDevtools && (
-          <ReactQueryDevtools initialIsOpen={false} />
+        {QueryDevtools && (
+          <Suspense fallback={null}>
+            <QueryDevtools initialIsOpen={false} />
+          </Suspense>
         )}
       </AppBootResourceGate>
     </QueryClientProvider>

src/main/desktop-modal-host.tsx

@@ -0,0 +1,31 @@
+import { EntryNoticeGateModal } from '@/features/game/components/shared/entry-notice-gate-modal'
+import DesktopAutoSettingModal from '@/modal/desktop/desktop-auto-setting-modal.tsx'
+import DesktopLanguageModal from '@/modal/desktop/desktop-language-modal.tsx'
+import DesktopLoginModal from '@/modal/desktop/desktop-login-modal.tsx'
+import DesktopNoticeModal from '@/modal/desktop/desktop-notice-modal.tsx'
+import { DesktopPeriodHistoryDrawer } from '@/modal/desktop/desktop-period-history-drawer.tsx'
+import DesktopProceduresModal from '@/modal/desktop/desktop-procedures-modal.tsx'
+import DesktopRegisterModal from '@/modal/desktop/desktop-register-modal.tsx'
+import DesktopRulesModal from '@/modal/desktop/desktop-rules-modal.tsx'
+import DesktopSupportModal from '@/modal/desktop/desktop-support-modal.tsx'
+import DesktopUserInfoModal from '@/modal/desktop/desktop-userInfo-modal.tsx'
+import DesktopWithdrawTopupModal from '@/modal/desktop/desktop-withdraw-topup-modal.tsx'
+
+export default function DesktopModalHost() {
+  return (
+    <>
+      <DesktopLoginModal />
+      <DesktopRegisterModal />
+      <DesktopLanguageModal />
+      <DesktopRulesModal />
+      <DesktopUserInfoModal />
+      <DesktopNoticeModal />
+      <DesktopAutoSettingModal />
+      <DesktopProceduresModal />
+      <DesktopWithdrawTopupModal />
+      <DesktopSupportModal />
+      <EntryNoticeGateModal />
+      <DesktopPeriodHistoryDrawer />
+    </>
+  )
+}

src/main/main-entry-page.tsx

@@ -1,102 +1,25 @@
-import { startTransition, useEffect, useState } from 'react'
+import { lazy, Suspense, startTransition, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getGameLobbyInit } from '@/api'
 import { MOBILE_LAYOUT_BREAKPOINT_PX } from '@/constants'
-import {
-  EntryNoticeGateModal,
-  MobileEntryNoticeGateModal,
-} from '@/features/game/components/shared/entry-notice-gate-modal'
 import { useGameRealtimeSync } from '@/hooks/use-game-realtime-sync.ts'
 import { useDocumentMetadata } from '@/lib/head/document-metadata.ts'
 import { notify } from '@/lib/notify.ts'
-import { MobileEntry } from '@/main/mobile-entry.tsx'
-import { PcEntry } from '@/main/pc-entry.tsx'
-import DesktopAutoSettingModal from '@/modal/desktop/desktop-auto-setting-modal.tsx'
-import DesktopLanguageModal from '@/modal/desktop/desktop-language-modal.tsx'
-import DesktopLoginModal from '@/modal/desktop/desktop-login-modal.tsx'
-import DesktopNoticeModal from '@/modal/desktop/desktop-notice-modal.tsx'
-import { DesktopPeriodHistoryDrawer } from '@/modal/desktop/desktop-period-history-drawer.tsx'
-import DesktopProceduresModal from '@/modal/desktop/desktop-procedures-modal.tsx'
-import DesktopRegisterModal from '@/modal/desktop/desktop-register-modal.tsx'
-import DesktopRulesModal from '@/modal/desktop/desktop-rules-modal.tsx'
-import DesktopSupportModal from '@/modal/desktop/desktop-support-modal.tsx'
-import DesktopUserInfoModal from '@/modal/desktop/desktop-userInfo-modal.tsx'
-import DesktopWithdrawTopupModal from '@/modal/desktop/desktop-withdraw-topup-modal.tsx'
-import MobileAutoSettingModal from '@/modal/mobile/mobile-auto-setting-modal.tsx'
-import MobileLanguageModal from '@/modal/mobile/mobile-language-modal.tsx'
-import MobileLoginModal from '@/modal/mobile/mobile-login-modal.tsx'
-import MobileNoticeModal from '@/modal/mobile/mobile-notice-modal.tsx'
-import { MobilePeriodHistoryDrawer } from '@/modal/mobile/mobile-period-history-drawer.tsx'
-import MobileProceduresModal from '@/modal/mobile/mobile-procedures-modal.tsx'
-import MobileRegisterModal from '@/modal/mobile/mobile-register-modal.tsx'
-import MobileRulesModal from '@/modal/mobile/mobile-rules-modal.tsx'
-import MobileSupportModal from '@/modal/mobile/mobile-support-modal.tsx'
-import MobileUserInfoModal from '@/modal/mobile/mobile-userInfo-modal.tsx'
-import MobileWithdrawTopupModal from '@/modal/mobile/mobile-withdraw-topup-modal.tsx'
 import { useAuthStore } from '@/store/auth'
 import { useGameRoundStore, useGameSessionStore } from '@/store/game'
 
-function DesktopModalHost() {
-  return (
-    <>
-      {/* 桌面端登录弹窗：用于未登录用户进入登录流程 */}
-      <DesktopLoginModal />
-      {/* 桌面端注册弹窗：用于新用户注册账号 */}
-      <DesktopRegisterModal />
-      {/* 桌面端语言切换弹窗：用于选择当前站点展示语言 */}
-      <DesktopLanguageModal />
-      {/* 桌面端规则弹窗：展示当前游戏玩法、下注与结算规则 */}
-      <DesktopRulesModal />
-      {/* 桌面端用户信息弹窗：展示个人资料与站内消息 */}
-      <DesktopUserInfoModal />
-      {/* 桌面端公告弹窗：展示活动公告或运营通知内容 */}
-      <DesktopNoticeModal />
-      {/* 桌面端自动托管弹窗：配置自动托管相关条件 */}
-      <DesktopAutoSettingModal />
-      {/* 桌面端充值/提现前置选择弹窗：先选择进入充值还是提现 */}
-      <DesktopProceduresModal />
-      {/* 桌面端充值/提现业务弹窗：承载具体的充值或提现内容 */}
-      <DesktopWithdrawTopupModal />
-      {/* 桌面端客服弹窗：承载在线客服 iframe */}
-      <DesktopSupportModal />
-      {/* 强制弹窗 */}
-      <EntryNoticeGateModal />
-      {/* 历史开奖信息弹窗 */}
-      <DesktopPeriodHistoryDrawer />
-    </>
-  )
-}
+const DesktopModalHost = lazy(() => import('@/main/desktop-modal-host.tsx'))
+const MobileEntry = lazy(async () => {
+  const { MobileEntry } = await import('@/main/mobile-entry.tsx')
 
-function MobileModalHost() {
-  return (
-    <>
-      {/* 移动端登录弹窗：用于未登录用户进入登录流程 */}
-      <MobileLoginModal />
-      {/* 移动端注册弹窗：用于新用户注册账号 */}
-      <MobileRegisterModal />
-      {/* 移动端语言切换弹窗：用于选择当前站点展示语言 */}
-      <MobileLanguageModal />
-      {/* 移动端规则弹窗：展示当前游戏玩法、下注与结算规则 */}
-      <MobileRulesModal />
-      {/* 移动端用户信息弹窗：展示个人资料与站内消息 */}
-      <MobileUserInfoModal />
-      {/* 移动端公告弹窗：展示活动公告或运营通知内容 */}
-      <MobileNoticeModal />
-      {/* 移动端自动托管弹窗：配置自动托管相关条件 */}
-      <MobileAutoSettingModal />
-      {/* 移动端充值/提现前置选择弹窗：先选择进入充值还是提现 */}
-      <MobileProceduresModal />
-      {/* 移动端充值/提现业务弹窗：承载具体的充值或提现内容 */}
-      <MobileWithdrawTopupModal />
-      {/* 移动端客服弹窗：承载在线客服 iframe */}
-      <MobileSupportModal />
-      {/* 强制弹窗 */}
-      <MobileEntryNoticeGateModal />
-      {/* 历史开奖信息弹窗 */}
-      <MobilePeriodHistoryDrawer />
-    </>
-  )
-}
+  return { default: MobileEntry }
+})
+const MobileModalHost = lazy(() => import('@/main/mobile-modal-host.tsx'))
+const PcEntry = lazy(async () => {
+  const { PcEntry } = await import('@/main/pc-entry.tsx')
+
+  return { default: PcEntry }
+})
 
 export function MainEntryPage() {
   const { t } = useTranslation()
@@ -258,8 +181,12 @@ export function MainEntryPage() {
         isMobile ? 'flex w-full flex-col' : 'flex min-h-0 flex-1 flex-col'
       }
     >
-      {isMobile ? <MobileEntry /> : <PcEntry />}
-      {isMobile ? <MobileModalHost /> : <DesktopModalHost />}
+      <Suspense fallback={null}>
+        {isMobile ? <MobileEntry /> : <PcEntry />}
+      </Suspense>
+      <Suspense fallback={null}>
+        {isMobile ? <MobileModalHost /> : <DesktopModalHost />}
+      </Suspense>
     </section>
   )
 }

src/main/mobile-modal-host.tsx

@@ -0,0 +1,31 @@
+import { MobileEntryNoticeGateModal } from '@/features/game/components/shared/entry-notice-gate-modal'
+import MobileAutoSettingModal from '@/modal/mobile/mobile-auto-setting-modal.tsx'
+import MobileLanguageModal from '@/modal/mobile/mobile-language-modal.tsx'
+import MobileLoginModal from '@/modal/mobile/mobile-login-modal.tsx'
+import MobileNoticeModal from '@/modal/mobile/mobile-notice-modal.tsx'
+import { MobilePeriodHistoryDrawer } from '@/modal/mobile/mobile-period-history-drawer.tsx'
+import MobileProceduresModal from '@/modal/mobile/mobile-procedures-modal.tsx'
+import MobileRegisterModal from '@/modal/mobile/mobile-register-modal.tsx'
+import MobileRulesModal from '@/modal/mobile/mobile-rules-modal.tsx'
+import MobileSupportModal from '@/modal/mobile/mobile-support-modal.tsx'
+import MobileUserInfoModal from '@/modal/mobile/mobile-userInfo-modal.tsx'
+import MobileWithdrawTopupModal from '@/modal/mobile/mobile-withdraw-topup-modal.tsx'
+
+export default function MobileModalHost() {
+  return (
+    <>
+      <MobileLoginModal />
+      <MobileRegisterModal />
+      <MobileLanguageModal />
+      <MobileRulesModal />
+      <MobileUserInfoModal />
+      <MobileNoticeModal />
+      <MobileAutoSettingModal />
+      <MobileProceduresModal />
+      <MobileWithdrawTopupModal />
+      <MobileSupportModal />
+      <MobileEntryNoticeGateModal />
+      <MobilePeriodHistoryDrawer />
+    </>
+  )
+}

vite.config.ts

@@ -5,10 +5,61 @@ import { tanstackRouter } from '@tanstack/router-plugin/vite'
 import react, { reactCompilerPreset } from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
 
+function resolveManualChunk(id: string) {
+  if (!id.includes('/node_modules/')) {
+    return
+  }
+
+  if (
+    id.includes('/node_modules/react/') ||
+    id.includes('/node_modules/react-dom/') ||
+    id.includes('/node_modules/scheduler/')
+  ) {
+    return 'vendor-react'
+  }
+
+  if (id.includes('/node_modules/@tanstack/')) {
+    return 'vendor-tanstack'
+  }
+
+  if (
+    id.includes('/node_modules/i18next/') ||
+    id.includes('/node_modules/react-i18next/')
+  ) {
+    return 'vendor-i18n'
+  }
+
+  if (
+    id.includes('/node_modules/motion/') ||
+    id.includes('/node_modules/lottie-web/')
+  ) {
+    return 'vendor-animation'
+  }
+
+  if (
+    id.includes('/node_modules/radix-ui/') ||
+    id.includes('/node_modules/@radix-ui/')
+  ) {
+    return 'vendor-radix'
+  }
+
+  if (id.includes('/node_modules/lucide-react/')) {
+    return 'vendor-icons'
+  }
+
+  return 'vendor'
+}
+
 export default defineConfig({
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
+      'lottie-web': fileURLToPath(
+        new URL(
+          './node_modules/lottie-web/build/player/lottie_light.js',
+          import.meta.url,
+        ),
+      ),
     },
   },
   server: {
@@ -33,5 +84,10 @@ export default defineConfig({
   ],
   build: {
     outDir: 'zihua-web',
+    rolldownOptions: {
+      output: {
+        manualChunks: resolveManualChunk,
+      },
+    },
   },
 })