feat: 本地优先启动服务拦截
This commit is contained in:
53
src/index.js
53
src/index.js
@@ -119,12 +119,10 @@ function registerServiceWorker() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 启动应用(MSW 异步初始化,不阻塞首屏渲染)
|
// 渲染应用
|
||||||
function startApp() {
|
function renderApp() {
|
||||||
// Create root
|
|
||||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||||
|
|
||||||
// ✅ 先渲染应用,不等待 MSW
|
|
||||||
// StrictMode 已启用(Chakra UI 2.10.9+ 已修复兼容性问题)
|
// StrictMode 已启用(Chakra UI 2.10.9+ 已修复兼容性问题)
|
||||||
root.render(
|
root.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
@@ -139,33 +137,30 @@ function startApp() {
|
|||||||
</React.StrictMode>
|
</React.StrictMode>
|
||||||
);
|
);
|
||||||
|
|
||||||
// ✅ 后台异步启动 MSW(不阻塞首屏渲染)
|
// 注册 Service Worker(非 Mock 模式)
|
||||||
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();
|
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();
|
startApp();
|
||||||
Reference in New Issue
Block a user