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

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

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,
+      },
+    },
   },
 })