#963 safeLazy 包裹 React.lazy 防 chunk 加载失败导致 element undefined
App.tsx 所有 React.lazy 改为 safeLazy(loader).catch(...) 保证 chunk load 失败时 element 有 fallback 不会是 undefined. 防 React error #231.
This commit is contained in:
qihu-bot committed
1 parent
420e0f6603
commit
679f23ff93
1 file changed
+64
-51
+64
-51
@@ -10,58 +10,71 @@ import AdminLayout from '@/components/layout/AdminLayout';
|
||||
|
||||
// 路由级代码分割：每个页面独立打包成 chunk，首屏只加载外壳与公共依赖，
|
||||
// 访问具体页面时才按需加载对应 chunk，显著加快首屏渲染与路由切换速度。
|
||||
const LandingPage = React.lazy(() => import('@/pages/front/LandingPage'));
|
||||
const LoginPage = React.lazy(() => import('@/pages/front/LoginPage'));
|
||||
const ChatPage = React.lazy(() => import('@/pages/front/ChatPage'));
|
||||
const KnowledgePage = React.lazy(() => import('@/pages/front/KnowledgePage'));
|
||||
const MarketPage = React.lazy(() => import('@/pages/front/MarketPage'));
|
||||
const TokenDashboardPage = React.lazy(() => import('@/pages/front/TokenDashboardPage'));
|
||||
const PricingPage = React.lazy(() => import('@/pages/front/PricingPage'));
|
||||
const ProfilePage = React.lazy(() => import('@/pages/front/ProfilePage'));
|
||||
const NotificationPage = React.lazy(() => import('@/pages/front/NotificationPage'));
|
||||
const AssetsPage = React.lazy(() => import('@/pages/front/AssetsPage'));
|
||||
const NovelPreviewPage = React.lazy(() => import('@/pages/front/NovelPreviewPage'));
|
||||
const AgentCanvas = React.lazy(() => import('@/pages/front/AgentCanvas'));
|
||||
const EvolutionDashboard = React.lazy(() => import('@/pages/front/EvolutionDashboard'));
|
||||
// #963: lazy() + .catch() fallback so element never undefined
|
||||
const safeLazy = (loader: () => Promise<{ default: React.ComponentType<any> }>) =>
|
||||
React.lazy(() =>
|
||||
loader().catch((err) => {
|
||||
console.error('[qihu-lazy-load-failed]', err);
|
||||
return { default: () => (
|
||||
React.createElement('div', { style: { padding: 20, color: '#dc2626' } },
|
||||
'Chunk load failed: ' + String((err as Error)?.message || err))
|
||||
) } as any;
|
||||
})
|
||||
);
|
||||
|
||||
const AdminDashboard = React.lazy(() => import('@/pages/admin/Dashboard'));
|
||||
const AdminUsers = React.lazy(() => import('@/pages/admin/Users'));
|
||||
const AdminModels = React.lazy(() => import('@/pages/admin/Models'));
|
||||
const AdminSiteSettings = React.lazy(() => import('@/pages/admin/SiteSettings'));
|
||||
const AdminSmsConfig = React.lazy(() => import('@/pages/admin/SmsConfig'));
|
||||
const AdminPayment = React.lazy(() => import('@/pages/admin/Payment'));
|
||||
const AdminServices = React.lazy(() => import('@/pages/admin/Services'));
|
||||
const AdminMembership = React.lazy(() => import('@/pages/admin/Membership'));
|
||||
const AdminAds = React.lazy(() => import('@/pages/admin/Ads'));
|
||||
const AdminMarket = React.lazy(() => import('@/pages/admin/Market'));
|
||||
const AdminLogs = React.lazy(() => import('@/pages/admin/Logs'));
|
||||
const AdminSkills = React.lazy(() => import('@/pages/admin/Skills'));
|
||||
const AdminAgents = React.lazy(() => import('@/pages/admin/Agents'));
|
||||
const AdminCodeExec = React.lazy(() => import('@/pages/admin/CodeExec'));
|
||||
const DistributionBuilder = React.lazy(() => import('@/pages/admin/DistributionBuilder'));
|
||||
const ImBots = React.lazy(() => import('@/pages/admin/ImBots'));
|
||||
const PrivacySettings = React.lazy(() => import('@/pages/admin/PrivacySettings'));
|
||||
const Promotion = React.lazy(() => import('@/pages/admin/Promotion'));
|
||||
const Achievement = React.lazy(() => import('@/pages/admin/Achievement'));
|
||||
const Tenant = React.lazy(() => import('@/pages/admin/Tenant'));
|
||||
const Billing = React.lazy(() => import('@/pages/admin/Billing'));
|
||||
const Analytics = React.lazy(() => import('@/pages/admin/Analytics'));
|
||||
const AdminKnowledge = React.lazy(() => import('@/pages/admin/Knowledge'));
|
||||
const AdminWorkflow = React.lazy(() => import('@/pages/admin/Workflow'));
|
||||
const AdminStorage = React.lazy(() => import('@/pages/admin/Storage'));
|
||||
const AdminDeveloper = React.lazy(() => import('@/pages/admin/Developer'));
|
||||
const AdminDeveloperTools = React.lazy(() => import('@/pages/admin/DeveloperTools'));
|
||||
const AdminAutomation = React.lazy(() => import('@/pages/admin/Automation'));
|
||||
const AdminMcp = React.lazy(() => import('@/pages/admin/Mcp'));
|
||||
const AdminApps = React.lazy(() => import('@/pages/admin/Apps'));
|
||||
const AssetCenter = React.lazy(() => import('@/pages/admin/AssetCenter'));
|
||||
const UserPortal = React.lazy(() => import('@/pages/UserPortal'));
|
||||
const WechatBot = React.lazy(() => import('@/pages/front/WechatBot'));
|
||||
const ImBotHub = React.lazy(() => import('@/pages/front/ImBotHub'));
|
||||
const AppServices = React.lazy(() => import('@/pages/front/AppServices'));
|
||||
const MarketProducts = React.lazy(() => import('@/pages/front/MarketProducts'));
|
||||
const MarketProductDetail = React.lazy(() => import('@/pages/front/MarketProductDetail'));
|
||||
const MarketProductsAdmin = React.lazy(() => import('@/pages/admin/MarketProductsAdmin'));
|
||||
const LandingPage = safeLazy(() => import('@/pages/front/LandingPage'));
|
||||
const LoginPage = safeLazy(() => import('@/pages/front/LoginPage'));
|
||||
const ChatPage = safeLazy(() => import('@/pages/front/ChatPage'));
|
||||
const KnowledgePage = safeLazy(() => import('@/pages/front/KnowledgePage'));
|
||||
const MarketPage = safeLazy(() => import('@/pages/front/MarketPage'));
|
||||
const TokenDashboardPage = safeLazy(() => import('@/pages/front/TokenDashboardPage'));
|
||||
const PricingPage = safeLazy(() => import('@/pages/front/PricingPage'));
|
||||
const ProfilePage = safeLazy(() => import('@/pages/front/ProfilePage'));
|
||||
const NotificationPage = safeLazy(() => import('@/pages/front/NotificationPage'));
|
||||
const AssetsPage = safeLazy(() => import('@/pages/front/AssetsPage'));
|
||||
const NovelPreviewPage = safeLazy(() => import('@/pages/front/NovelPreviewPage'));
|
||||
const AgentCanvas = safeLazy(() => import('@/pages/front/AgentCanvas'));
|
||||
const EvolutionDashboard = safeLazy(() => import('@/pages/front/EvolutionDashboard'));
|
||||
|
||||
const AdminDashboard = safeLazy(() => import('@/pages/admin/Dashboard'));
|
||||
const AdminUsers = safeLazy(() => import('@/pages/admin/Users'));
|
||||
const AdminModels = safeLazy(() => import('@/pages/admin/Models'));
|
||||
const AdminSiteSettings = safeLazy(() => import('@/pages/admin/SiteSettings'));
|
||||
const AdminSmsConfig = safeLazy(() => import('@/pages/admin/SmsConfig'));
|
||||
const AdminPayment = safeLazy(() => import('@/pages/admin/Payment'));
|
||||
const AdminServices = safeLazy(() => import('@/pages/admin/Services'));
|
||||
const AdminMembership = safeLazy(() => import('@/pages/admin/Membership'));
|
||||
const AdminAds = safeLazy(() => import('@/pages/admin/Ads'));
|
||||
const AdminMarket = safeLazy(() => import('@/pages/admin/Market'));
|
||||
const AdminMarketProducts = safeLazy(() => import('@/pages/admin/MarketProductsAdmin'));
|
||||
const AdminLogs = safeLazy(() => import('@/pages/admin/Logs'));
|
||||
const AdminSkills = safeLazy(() => import('@/pages/admin/Skills'));
|
||||
const AdminAgents = safeLazy(() => import('@/pages/admin/Agents'));
|
||||
const AdminCodeExec = safeLazy(() => import('@/pages/admin/CodeExec'));
|
||||
const DistributionBuilder = safeLazy(() => import('@/pages/admin/DistributionBuilder'));
|
||||
const ImBots = safeLazy(() => import('@/pages/admin/ImBots'));
|
||||
const PrivacySettings = safeLazy(() => import('@/pages/admin/PrivacySettings'));
|
||||
const Promotion = safeLazy(() => import('@/pages/admin/Promotion'));
|
||||
const Achievement = safeLazy(() => import('@/pages/admin/Achievement'));
|
||||
const Tenant = safeLazy(() => import('@/pages/admin/Tenant'));
|
||||
const Billing = safeLazy(() => import('@/pages/admin/Billing'));
|
||||
const Analytics = safeLazy(() => import('@/pages/admin/Analytics'));
|
||||
const AdminKnowledge = safeLazy(() => import('@/pages/admin/Knowledge'));
|
||||
const AdminWorkflow = safeLazy(() => import('@/pages/admin/Workflow'));
|
||||
const AdminStorage = safeLazy(() => import('@/pages/admin/Storage'));
|
||||
const AdminDeveloper = safeLazy(() => import('@/pages/admin/Developer'));
|
||||
const AdminDeveloperTools = safeLazy(() => import('@/pages/admin/DeveloperTools'));
|
||||
const AdminAutomation = safeLazy(() => import('@/pages/admin/Automation'));
|
||||
const AdminMcp = safeLazy(() => import('@/pages/admin/Mcp'));
|
||||
const AdminApps = safeLazy(() => import('@/pages/admin/Apps'));
|
||||
const AssetCenter = safeLazy(() => import('@/pages/admin/AssetCenter'));
|
||||
const UserPortal = safeLazy(() => import('@/pages/UserPortal'));
|
||||
const WechatBot = safeLazy(() => import('@/pages/front/WechatBot'));
|
||||
const ImBotHub = safeLazy(() => import('@/pages/front/ImBotHub'));
|
||||
const AppServices = safeLazy(() => import('@/pages/front/AppServices'));
|
||||
const MarketProducts = safeLazy(() => import('@/pages/front/MarketProducts'));
|
||||
const MarketProductDetail = safeLazy(() => import('@/pages/front/MarketProductDetail'));
|
||||
const MarketProductsAdmin = safeLazy(() => import('@/pages/admin/MarketProductsAdmin'));
|
||||
|
||||
const pageFallback = <div className="loading-screen">加载中...</div>;
|
||||
|
||||
|
||||
Reference in new issue
Block a user