From 7a2c73f3ca03ecfbb152f4ae807c802af9f2dddb Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Wed, 26 Nov 2025 11:30:12 +0800 Subject: [PATCH] =?UTF-8?q?:pref:=20=E9=A6=96=E5=B1=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 11 +- src/index.js | 38 +++- src/mocks/handlers/auth.js | 7 +- src/routes/lazy-components.js | 4 +- .../Home/components/HomePageSkeleton.tsx | 179 ------------------ src/views/Home/index.tsx | 26 --- 6 files changed, 42 insertions(+), 223 deletions(-) delete mode 100644 src/views/Home/components/HomePageSkeleton.tsx delete mode 100644 src/views/Home/index.tsx diff --git a/src/App.js b/src/App.js index dfa9f1f8..5667aa3e 100755 --- a/src/App.js +++ b/src/App.js @@ -53,10 +53,15 @@ function AppContent() { const pageEnterTimeRef = useRef(Date.now()); const currentPathRef = useRef(location.pathname); - // 🎯 PostHog Redux 初始化 + // 🎯 PostHog Redux 初始化（延迟执行，不阻塞首屏） useEffect(() => { - dispatch(initializePostHog()); - logger.info('App', 'PostHog Redux 初始化已触发'); + // ⚡ 延迟 2 秒初始化 PostHog，确保首屏渲染不被阻塞 + const timer = setTimeout(() => { + dispatch(initializePostHog()); + logger.info('App', 'PostHog Redux 初始化已触发（延迟 2 秒）'); + }, 2000); + + return () => clearTimeout(timer); }, [dispatch]); // ⚡ 性能监控：标记 React 初始化完成 diff --git a/src/index.js b/src/index.js index c27182df..f6c49045 100755 --- a/src/index.js +++ b/src/index.js @@ -119,19 +119,13 @@ function registerServiceWorker() { } } -// 启动 Mock Service Worker（如果启用） -async function startApp() { - // 只在开发环境启动 MSW - if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_ENABLE_MOCK === 'true') { - const { startMockServiceWorker } = await import('./mocks/browser'); - await startMockServiceWorker(); - } - +// 启动应用（MSW 异步初始化，不阻塞首屏渲染） +function startApp() { // Create root const root = ReactDOM.createRoot(document.getElementById('root')); - // Render the app with Router wrapper - // ✅ StrictMode 已启用（Chakra UI 2.10.9+ 已修复兼容性问题） + // ✅ 先渲染应用，不等待 MSW + // StrictMode 已启用（Chakra UI 2.10.9+ 已修复兼容性问题） root.render( ); + // ✅ 后台异步启动 MSW（不阻塞首屏渲染） + if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_ENABLE_MOCK === 'true') { + const initMSW = async () => { + try { + const { startMockServiceWorker } = await import('./mocks/browser'); + await startMockServiceWorker(); + console.log( + '%c[MSW] ✅ Mock Service Worker 已在后台启动', + 'color: #4CAF50; font-weight: bold;' + ); + } catch (error) { + console.error('[MSW] ❌ Mock Service Worker 启动失败:', error); + } + }; + + // 使用 requestIdleCallback 在浏览器空闲时初始化，不阻塞首屏 + if ('requestIdleCallback' in window) { + requestIdleCallback(() => initMSW(), { timeout: 3000 }); + } else { + // 降级：使用 setTimeout(0) 延迟执行 + setTimeout(initMSW, 0); + } + } + // 注册 Service Worker registerServiceWorker(); } diff --git a/src/mocks/handlers/auth.js b/src/mocks/handlers/auth.js index 6df5062a..e1f36005 100644 --- a/src/mocks/handlers/auth.js +++ b/src/mocks/handlers/auth.js @@ -12,7 +12,8 @@ import { } from '../data/users'; // 模拟网络延迟（毫秒） -const NETWORK_DELAY = 500; +// ⚡ 开发环境使用较短延迟，加快首屏加载速度 +const NETWORK_DELAY = 50; export const authHandlers = [ // ==================== 手机验证码登录 ==================== @@ -356,7 +357,7 @@ export const authHandlers = [ // 7. 检查 Session（AuthContext 使用的正确端点） http.get('/api/auth/session', async () => { - await delay(300); + await delay(NETWORK_DELAY); // ⚡ 使用统一延迟配置 // 获取当前登录用户 const currentUser = getCurrentUser(); @@ -380,7 +381,7 @@ export const authHandlers = [ // 8. 检查 Session（旧端点，保留兼容） http.get('/api/auth/check-session', async () => { - await delay(300); + await delay(NETWORK_DELAY); // ⚡ 使用统一延迟配置 // 获取当前登录用户 const currentUser = getCurrentUser(); diff --git a/src/routes/lazy-components.js b/src/routes/lazy-components.js index affeb28a..dd3434bc 100644 --- a/src/routes/lazy-components.js +++ b/src/routes/lazy-components.js @@ -9,8 +9,8 @@ import React from 'react'; */ export const lazyComponents = { // Home 模块 - // 首页使用专用入口组件，内置骨架屏 fallback - HomePage: React.lazy(() => import('@views/Home')), + // ⚡ 直接引用 HomePage，无需中间层（静态页面不需要骨架屏） + HomePage: React.lazy(() => import('@views/Home/HomePage')), CenterDashboard: React.lazy(() => import('@views/Dashboard/Center')), ProfilePage: React.lazy(() => import('@views/Profile')), SettingsPage: React.lazy(() => import('@views/Settings/SettingsPage')), diff --git a/src/views/Home/components/HomePageSkeleton.tsx b/src/views/Home/components/HomePageSkeleton.tsx deleted file mode 100644 index a17b031a..00000000 --- a/src/views/Home/components/HomePageSkeleton.tsx +++ /dev/null @@ -1,179 +0,0 @@ -/** - * 首页骨架屏组件 - * 匹配首页深色科技风格，减少白屏感知时间 - * - * @module views/Home/components/HomePageSkeleton - */ - -import React from 'react'; -import { - Box, - Container, - SimpleGrid, - Skeleton, - SkeletonText, - VStack, -} from '@chakra-ui/react'; - -// ============================================================ -// 类型定义 -// ============================================================ - -interface HomePageSkeletonProps { - /** 骨架屏速度（秒） */ - speed?: number; -} - -// ============================================================ -// 单个卡片骨架 - 深色风格 -// ============================================================ - -const FeatureCardSkeleton: React.FC<{ isFeatured?: boolean; speed?: number }> = ({ - isFeatured = false, - speed = 0.8, -}) => { - return ( - - - {/* 图标骨架 */} - - - {/* 标题骨架 */} - - - {/* 描述骨架 */} - - - - ); -}; - -// ============================================================ -// Hero 区域骨架 -// ============================================================ - -const HeroSkeleton: React.FC<{ speed?: number }> = ({ speed = 0.8 }) => { - return ( - - {/* 主标题骨架 */} - - - {/* 副标题骨架 */} - - - ); -}; - -// ============================================================ -// 主骨架组件 -// ============================================================ - -export const HomePageSkeleton: React.FC = ({ - speed = 0.8, -}) => { - return ( - - {/* 背景装饰 - 模拟光晕效果 */} - - - - - {/* Hero 区域骨架 */} - - - {/* 功能卡片区域骨架 */} - - - {/* 特色功能卡片骨架 */} - - - - - {/* 其他功能卡片骨架 */} - - {[1, 2, 3, 4, 5].map((index) => ( - - ))} - - - - - - - ); -}; - -// ============================================================ -// 默认导出 -// ============================================================ - -export default HomePageSkeleton; diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx deleted file mode 100644 index 5a241246..00000000 --- a/src/views/Home/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/** - * 首页入口组件 - * 使用专用骨架屏作为 Suspense fallback，优化加载体验 - * - * @module views/Home - */ - -import React, { Suspense, lazy } from 'react'; -import { HomePageSkeleton } from './components/HomePageSkeleton'; - -// 懒加载实际首页组件 -const HomePage = lazy(() => import('./HomePage')); - -/** - * 首页入口 - 带骨架屏的懒加载包装 - * 使用深色风格骨架屏，与首页视觉风格一致 - */ -const HomePageEntry: React.FC = () => { - return ( - }> - - - ); -}; - -export default HomePageEntry;