:pref: 首屏优化

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(
         <React.StrictMode>
             <Router
@@ -145,6 +139,30 @@ async function startApp() {
         </React.StrictMode>
     );
 
+    // ✅ 后台异步启动 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();
 }