feat: 本地优先启动服务拦截

This commit is contained in:
zdl
2025-11-26 15:23:37 +08:00
parent e277352133
commit 506e5a448c

View File

@@ -119,12 +119,10 @@ function registerServiceWorker() {
}
}
// 启动应用MSW 异步初始化,不阻塞首屏渲染)
function startApp() {
// Create root
// 渲染应用
function renderApp() {
const root = ReactDOM.createRoot(document.getElementById('root'));
// ✅ 先渲染应用,不等待 MSW
// StrictMode 已启用Chakra UI 2.10.9+ 已修复兼容性问题)
root.render(
<React.StrictMode>
@@ -139,33 +137,30 @@ 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
// 注册 Service Worker非 Mock 模式
registerServiceWorker();
}
// 启动应用
async function startApp() {
// ✅ 开发环境 Mock 模式:先启动 MSW再渲染应用
// 确保所有 API 请求(包括 AuthContext.checkSession都被正确拦截
if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_ENABLE_MOCK === 'true') {
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);
}
}
// 渲染应用
renderApp();
}
// 启动应用
startApp();