fix: 懒加载chunk失败时自动刷新页面
部署后旧chunk文件名(带hash)被删除,浏览器若缓存了旧index.html 仍会请求旧chunk导致 "Failed to fetch dynamically imported module"。 新增 lazyRetry 包装器,检测到此错误时自动刷新页面获取新index.html。 用 sessionStorage 标记防止无限刷新。 Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
+55
-54
@@ -1,4 +1,4 @@
|
||||
import { lazy, Suspense, useState, useEffect } from 'react'
|
||||
import { Suspense, useState, useEffect } from 'react'
|
||||
import { Routes, Route, Navigate } from 'react-router-dom'
|
||||
import { Toaster } from 'sonner'
|
||||
import { useAuthStore } from './store/authStore'
|
||||
@@ -11,64 +11,65 @@ import PageContainer from './components/layout/PageContainer'
|
||||
import { CommandPalette } from './components/ui/CommandPalette'
|
||||
import { SkeletonPage } from './components/ui/Skeleton'
|
||||
import ErrorBoundary from './components/ui/ErrorBoundary'
|
||||
import { lazyRetry } from './lib/lazyRetry'
|
||||
|
||||
const Login = lazy(() => import('./pages/auth/Login'))
|
||||
const Register = lazy(() => import('./pages/auth/Register'))
|
||||
const ForgotPassword = lazy(() => import('./pages/auth/ForgotPassword'))
|
||||
const Dashboard = lazy(() => import('./pages/Dashboard'))
|
||||
const Money = lazy(() => import('./pages/Money'))
|
||||
const SocialInsurance = lazy(() => import('./pages/SocialInsurance'))
|
||||
const Roster = lazy(() => import('./pages/Roster'))
|
||||
const OrgChart = lazy(() => import('./pages/OrgChart'))
|
||||
const SupportDashboard = lazy(() => import('./pages/support/SupportDashboard'))
|
||||
const Termination = lazy(() => import('./pages/Termination'))
|
||||
const AIAssistant = lazy(() => import('./pages/AIAssistant'))
|
||||
const Settings = lazy(() => import('./pages/Settings'))
|
||||
const Evidence = lazy(() => import('./pages/Evidence'))
|
||||
const Policies = lazy(() => import('./pages/Policies'))
|
||||
const Attendance = lazy(() => import('./pages/Attendance'))
|
||||
const Templates = lazy(() => import('./pages/Templates'))
|
||||
const AuditLog = lazy(() => import('./pages/AuditLog'))
|
||||
const Notifications = lazy(() => import('./pages/Notifications'))
|
||||
const PortalLogin = lazy(() => import('./pages/portal/PortalLogin'))
|
||||
const Payslip = lazy(() => import('./pages/portal/Payslip'))
|
||||
const MyContract = lazy(() => import('./pages/portal/MyContract'))
|
||||
const Onboarding = lazy(() => import('./pages/portal/Onboarding'))
|
||||
const ContractConfirm = lazy(() => import('./pages/portal/ContractConfirm'))
|
||||
const MyPolicies = lazy(() => import('./pages/portal/MyPolicies'))
|
||||
const AutoLogin = lazy(() => import('./pages/portal/AutoLogin'))
|
||||
const MedicalPeriodCalculator = lazy(() => import('./pages/tools/MedicalPeriodCalculator'))
|
||||
const HealthCheck = lazy(() => import('./pages/tools/HealthCheck'))
|
||||
const AnnualValueReport = lazy(() => import('./pages/tools/AnnualValueReport'))
|
||||
const CalendarPage = lazy(() => import('./pages/Calendar'))
|
||||
const MyAttendance = lazy(() => import('./pages/portal/MyAttendance'))
|
||||
const MyLeave = lazy(() => import('./pages/portal/MyLeave'))
|
||||
const SpecialStatus = lazy(() => import('./pages/SpecialStatus'))
|
||||
const CompanyFiles = lazy(() => import('./pages/CompanyFiles'))
|
||||
const LeaveApproval = lazy(() => import('./pages/LeaveApproval'))
|
||||
const TrainingRecords = lazy(() => import('./pages/roster/TrainingRecords'))
|
||||
const PerformanceRecords = lazy(() => import('./pages/roster/PerformanceRecords'))
|
||||
const DisciplinaryRecords = lazy(() => import('./pages/roster/DisciplinaryRecords'))
|
||||
const Login = lazyRetry(() => import('./pages/auth/Login'))
|
||||
const Register = lazyRetry(() => import('./pages/auth/Register'))
|
||||
const ForgotPassword = lazyRetry(() => import('./pages/auth/ForgotPassword'))
|
||||
const Dashboard = lazyRetry(() => import('./pages/Dashboard'))
|
||||
const Money = lazyRetry(() => import('./pages/Money'))
|
||||
const SocialInsurance = lazyRetry(() => import('./pages/SocialInsurance'))
|
||||
const Roster = lazyRetry(() => import('./pages/Roster'))
|
||||
const OrgChart = lazyRetry(() => import('./pages/OrgChart'))
|
||||
const SupportDashboard = lazyRetry(() => import('./pages/support/SupportDashboard'))
|
||||
const Termination = lazyRetry(() => import('./pages/Termination'))
|
||||
const AIAssistant = lazyRetry(() => import('./pages/AIAssistant'))
|
||||
const Settings = lazyRetry(() => import('./pages/Settings'))
|
||||
const Evidence = lazyRetry(() => import('./pages/Evidence'))
|
||||
const Policies = lazyRetry(() => import('./pages/Policies'))
|
||||
const Attendance = lazyRetry(() => import('./pages/Attendance'))
|
||||
const Templates = lazyRetry(() => import('./pages/Templates'))
|
||||
const AuditLog = lazyRetry(() => import('./pages/AuditLog'))
|
||||
const Notifications = lazyRetry(() => import('./pages/Notifications'))
|
||||
const PortalLogin = lazyRetry(() => import('./pages/portal/PortalLogin'))
|
||||
const Payslip = lazyRetry(() => import('./pages/portal/Payslip'))
|
||||
const MyContract = lazyRetry(() => import('./pages/portal/MyContract'))
|
||||
const Onboarding = lazyRetry(() => import('./pages/portal/Onboarding'))
|
||||
const ContractConfirm = lazyRetry(() => import('./pages/portal/ContractConfirm'))
|
||||
const MyPolicies = lazyRetry(() => import('./pages/portal/MyPolicies'))
|
||||
const AutoLogin = lazyRetry(() => import('./pages/portal/AutoLogin'))
|
||||
const MedicalPeriodCalculator = lazyRetry(() => import('./pages/tools/MedicalPeriodCalculator'))
|
||||
const HealthCheck = lazyRetry(() => import('./pages/tools/HealthCheck'))
|
||||
const AnnualValueReport = lazyRetry(() => import('./pages/tools/AnnualValueReport'))
|
||||
const CalendarPage = lazyRetry(() => import('./pages/Calendar'))
|
||||
const MyAttendance = lazyRetry(() => import('./pages/portal/MyAttendance'))
|
||||
const MyLeave = lazyRetry(() => import('./pages/portal/MyLeave'))
|
||||
const SpecialStatus = lazyRetry(() => import('./pages/SpecialStatus'))
|
||||
const CompanyFiles = lazyRetry(() => import('./pages/CompanyFiles'))
|
||||
const LeaveApproval = lazyRetry(() => import('./pages/LeaveApproval'))
|
||||
const TrainingRecords = lazyRetry(() => import('./pages/roster/TrainingRecords'))
|
||||
const PerformanceRecords = lazyRetry(() => import('./pages/roster/PerformanceRecords'))
|
||||
const DisciplinaryRecords = lazyRetry(() => import('./pages/roster/DisciplinaryRecords'))
|
||||
|
||||
// Sprint 4-5 新增页面
|
||||
const EmployeeHome = lazy(() => import('./pages/portal/EmployeeHome'))
|
||||
const OnboardingProgress = lazy(() => import('./pages/portal/OnboardingProgress'))
|
||||
const ResignationApply = lazy(() => import('./pages/portal/ResignationApply'))
|
||||
const MyEsign = lazy(() => import('./pages/portal/MyEsign'))
|
||||
const MyRecords = lazy(() => import('./pages/portal/MyRecords'))
|
||||
const RiskCenter = lazy(() => import('./pages/compliance/RiskCenter'))
|
||||
const SalaryDashboard = lazy(() => import('./pages/SalaryDashboard'))
|
||||
const CommercialInsurance = lazy(() => import('./pages/CommercialInsurance'))
|
||||
const EmployeeBenefits = lazy(() => import('./pages/EmployeeBenefits'))
|
||||
const ESign = lazy(() => import('./pages/ESign'))
|
||||
const CommissionBonus = lazy(() => import('./pages/CommissionBonus'))
|
||||
const EmployeeHome = lazyRetry(() => import('./pages/portal/EmployeeHome'))
|
||||
const OnboardingProgress = lazyRetry(() => import('./pages/portal/OnboardingProgress'))
|
||||
const ResignationApply = lazyRetry(() => import('./pages/portal/ResignationApply'))
|
||||
const MyEsign = lazyRetry(() => import('./pages/portal/MyEsign'))
|
||||
const MyRecords = lazyRetry(() => import('./pages/portal/MyRecords'))
|
||||
const RiskCenter = lazyRetry(() => import('./pages/compliance/RiskCenter'))
|
||||
const SalaryDashboard = lazyRetry(() => import('./pages/SalaryDashboard'))
|
||||
const CommercialInsurance = lazyRetry(() => import('./pages/CommercialInsurance'))
|
||||
const EmployeeBenefits = lazyRetry(() => import('./pages/EmployeeBenefits'))
|
||||
const ESign = lazyRetry(() => import('./pages/ESign'))
|
||||
const CommissionBonus = lazyRetry(() => import('./pages/CommissionBonus'))
|
||||
|
||||
// 平台管理端
|
||||
const PlatformLogin = lazy(() => import('./pages/platform/PlatformLogin'))
|
||||
const PlatformDashboard = lazy(() => import('./pages/platform/PlatformDashboard'))
|
||||
const PlatformOrgs = lazy(() => import('./pages/platform/PlatformOrgs'))
|
||||
const PlatformUsers = lazy(() => import('./pages/platform/PlatformUsers'))
|
||||
const PlatformSidebar = lazy(() => import('./components/layout/PlatformSidebar'))
|
||||
const PlatformLogin = lazyRetry(() => import('./pages/platform/PlatformLogin'))
|
||||
const PlatformDashboard = lazyRetry(() => import('./pages/platform/PlatformDashboard'))
|
||||
const PlatformOrgs = lazyRetry(() => import('./pages/platform/PlatformOrgs'))
|
||||
const PlatformUsers = lazyRetry(() => import('./pages/platform/PlatformUsers'))
|
||||
const PlatformSidebar = lazyRetry(() => import('./components/layout/PlatformSidebar'))
|
||||
|
||||
function ProtectedRoute({ children }: { children: React.ReactNode }) {
|
||||
const isAuthenticated = useAuthStore((s) => s.isAuthenticated)
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
import { lazy, ComponentType } from 'react'
|
||||
|
||||
/**
|
||||
* 带自动重试的懒加载。
|
||||
*
|
||||
* 部署后旧 chunk 文件名(带 hash)被删除,浏览器若缓存了旧 index.html
|
||||
* 仍会请求旧 chunk 导致 "Failed to fetch dynamically imported module"。
|
||||
* 此时自动刷新页面,让浏览器获取新 index.html 中的新 chunk 引用。
|
||||
*/
|
||||
export function lazyRetry<T extends ComponentType<any>>(
|
||||
factory: () => Promise<{ default: T } | { [key: string]: T }>,
|
||||
): React.LazyExoticComponent<T> {
|
||||
return lazy(async () => {
|
||||
try {
|
||||
const m = await factory()
|
||||
// 统一为 { default: T } 格式
|
||||
if ('default' in m) return { default: m.default }
|
||||
// named export 模式:取第一个导出作为 default
|
||||
const firstKey = Object.keys(m)[0]
|
||||
return { default: m[firstKey] }
|
||||
} catch (err: any) {
|
||||
// 仅对动态导入失败自动刷新,避免其他错误误触发
|
||||
if (
|
||||
err &&
|
||||
(err.message?.includes('Failed to fetch dynamically imported module') ||
|
||||
err.message?.includes('Importing a module script failed') ||
|
||||
err.message?.includes('error loading dynamically imported module'))
|
||||
) {
|
||||
// 防止无限刷新:用 sessionStorage 标记,仅刷新一次
|
||||
const key = 'lazyRetry:' + (err.message.match(/[\w-]+\.js/)?.[0] || 'unknown')
|
||||
if (!sessionStorage.getItem(key)) {
|
||||
sessionStorage.setItem(key, '1')
|
||||
window.location.reload()
|
||||
// 返回一个永不 resolve 的 Promise,等待页面刷新
|
||||
return new Promise<{ default: T }>(() => {})
|
||||
}
|
||||
sessionStorage.removeItem(key)
|
||||
}
|
||||
throw err
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -1,13 +1,14 @@
|
||||
import { useState, lazy, Suspense } from 'react'
|
||||
import { useState, Suspense } from 'react'
|
||||
import { Bot, FileSearch, Scale, Sparkles, BookOpen, TrendingUp, Loader2 } from 'lucide-react'
|
||||
import PageGuide from '../components/ui/PageGuide'
|
||||
import { lazyRetry } from '../lib/lazyRetry'
|
||||
|
||||
const ChatTab = lazy(() => import('./ai-assistant/ChatTab').then(m => ({ default: m.ChatTab })))
|
||||
const PredictTab = lazy(() => import('./ai-assistant/PredictTab').then(m => ({ default: m.PredictTab })))
|
||||
const ReviewTab = lazy(() => import('./ai-assistant/ReviewTab').then(m => ({ default: m.ReviewTab })))
|
||||
const CaseTab = lazy(() => import('./ai-assistant/CaseTab').then(m => ({ default: m.CaseTab })))
|
||||
const KnowledgeTab = lazy(() => import('./ai-assistant/KnowledgeTab').then(m => ({ default: m.KnowledgeTab })))
|
||||
const HRReportTab = lazy(() => import('./ai-assistant/HRReportTab').then(m => ({ default: m.HRReportTab })))
|
||||
const ChatTab = lazyRetry(() => import('./ai-assistant/ChatTab').then(m => ({ default: m.ChatTab })))
|
||||
const PredictTab = lazyRetry(() => import('./ai-assistant/PredictTab').then(m => ({ default: m.PredictTab })))
|
||||
const ReviewTab = lazyRetry(() => import('./ai-assistant/ReviewTab').then(m => ({ default: m.ReviewTab })))
|
||||
const CaseTab = lazyRetry(() => import('./ai-assistant/CaseTab').then(m => ({ default: m.CaseTab })))
|
||||
const KnowledgeTab = lazyRetry(() => import('./ai-assistant/KnowledgeTab').then(m => ({ default: m.KnowledgeTab })))
|
||||
const HRReportTab = lazyRetry(() => import('./ai-assistant/HRReportTab').then(m => ({ default: m.HRReportTab })))
|
||||
|
||||
type Tab = 'chat' | 'predict' | 'review' | 'case' | 'knowledge' | 'hr-report'
|
||||
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import { useState, lazy, Suspense } from 'react'
|
||||
import { useState, Suspense } from 'react'
|
||||
import { useSearchParams } from 'react-router-dom'
|
||||
import { Layers, Wallet, LayoutTemplate, Clock, Receipt, Loader2 } from 'lucide-react'
|
||||
import PageGuide from '../components/ui/PageGuide'
|
||||
import { lazyRetry } from '../lib/lazyRetry'
|
||||
|
||||
const BatchManager = lazy(() => import('./money/BatchTab').then(m => ({ default: m.BatchManager })))
|
||||
const TemplateManager = lazy(() => import('./money/TemplateTab').then(m => ({ default: m.TemplateManager })))
|
||||
const OvertimeCalculator = lazy(() => import('./money/OvertimeTab').then(m => ({ default: m.OvertimeCalculator })))
|
||||
const PayslipManager = lazy(() => import('./money/PayslipTab').then(m => ({ default: m.PayslipManager })))
|
||||
const BatchManager = lazyRetry(() => import('./money/BatchTab').then(m => ({ default: m.BatchManager })))
|
||||
const TemplateManager = lazyRetry(() => import('./money/TemplateTab').then(m => ({ default: m.TemplateManager })))
|
||||
const OvertimeCalculator = lazyRetry(() => import('./money/OvertimeTab').then(m => ({ default: m.OvertimeCalculator })))
|
||||
const PayslipManager = lazyRetry(() => import('./money/PayslipTab').then(m => ({ default: m.PayslipManager })))
|
||||
|
||||
type Tab = 'batch' | 'template' | 'overtime' | 'payslip'
|
||||
|
||||
|
||||
Reference in New Issue
Block a user