#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，首屏只加载外壳与公共依赖，
|
||||||
// 访问具体页面时才按需加载对应 chunk，显著加快首屏渲染与路由切换速度。
|
// 访问具体页面时才按需加载对应 chunk，显著加快首屏渲染与路由切换速度。
|
||||||
const LandingPage = React.lazy(() => import('@/pages/front/LandingPage'));
|
// #963: lazy() + .catch() fallback so element never undefined
|
||||||
const LoginPage = React.lazy(() => import('@/pages/front/LoginPage'));
|
const safeLazy = (loader: () => Promise<{ default: React.ComponentType<any> }>) =>
|
||||||
const ChatPage = React.lazy(() => import('@/pages/front/ChatPage'));
|
React.lazy(() =>
|
||||||
const KnowledgePage = React.lazy(() => import('@/pages/front/KnowledgePage'));
|
loader().catch((err) => {
|
||||||
const MarketPage = React.lazy(() => import('@/pages/front/MarketPage'));
|
console.error('[qihu-lazy-load-failed]', err);
|
||||||
const TokenDashboardPage = React.lazy(() => import('@/pages/front/TokenDashboardPage'));
|
return { default: () => (
|
||||||
const PricingPage = React.lazy(() => import('@/pages/front/PricingPage'));
|
React.createElement('div', { style: { padding: 20, color: '#dc2626' } },
|
||||||
const ProfilePage = React.lazy(() => import('@/pages/front/ProfilePage'));
|
'Chunk load failed: ' + String((err as Error)?.message || err))
|
||||||
const NotificationPage = React.lazy(() => import('@/pages/front/NotificationPage'));
|
) } as any;
|
||||||
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'));
|
|
||||||
|
|
||||||
const AdminDashboard = React.lazy(() => import('@/pages/admin/Dashboard'));
|
const LandingPage = safeLazy(() => import('@/pages/front/LandingPage'));
|
||||||
const AdminUsers = React.lazy(() => import('@/pages/admin/Users'));
|
const LoginPage = safeLazy(() => import('@/pages/front/LoginPage'));
|
||||||
const AdminModels = React.lazy(() => import('@/pages/admin/Models'));
|
const ChatPage = safeLazy(() => import('@/pages/front/ChatPage'));
|
||||||
const AdminSiteSettings = React.lazy(() => import('@/pages/admin/SiteSettings'));
|
const KnowledgePage = safeLazy(() => import('@/pages/front/KnowledgePage'));
|
||||||
const AdminSmsConfig = React.lazy(() => import('@/pages/admin/SmsConfig'));
|
const MarketPage = safeLazy(() => import('@/pages/front/MarketPage'));
|
||||||
const AdminPayment = React.lazy(() => import('@/pages/admin/Payment'));
|
const TokenDashboardPage = safeLazy(() => import('@/pages/front/TokenDashboardPage'));
|
||||||
const AdminServices = React.lazy(() => import('@/pages/admin/Services'));
|
const PricingPage = safeLazy(() => import('@/pages/front/PricingPage'));
|
||||||
const AdminMembership = React.lazy(() => import('@/pages/admin/Membership'));
|
const ProfilePage = safeLazy(() => import('@/pages/front/ProfilePage'));
|
||||||
const AdminAds = React.lazy(() => import('@/pages/admin/Ads'));
|
const NotificationPage = safeLazy(() => import('@/pages/front/NotificationPage'));
|
||||||
const AdminMarket = React.lazy(() => import('@/pages/admin/Market'));
|
const AssetsPage = safeLazy(() => import('@/pages/front/AssetsPage'));
|
||||||
const AdminLogs = React.lazy(() => import('@/pages/admin/Logs'));
|
const NovelPreviewPage = safeLazy(() => import('@/pages/front/NovelPreviewPage'));
|
||||||
const AdminSkills = React.lazy(() => import('@/pages/admin/Skills'));
|
const AgentCanvas = safeLazy(() => import('@/pages/front/AgentCanvas'));
|
||||||
const AdminAgents = React.lazy(() => import('@/pages/admin/Agents'));
|
const EvolutionDashboard = safeLazy(() => import('@/pages/front/EvolutionDashboard'));
|
||||||
const AdminCodeExec = React.lazy(() => import('@/pages/admin/CodeExec'));
|
|
||||||
const DistributionBuilder = React.lazy(() => import('@/pages/admin/DistributionBuilder'));
|
const AdminDashboard = safeLazy(() => import('@/pages/admin/Dashboard'));
|
||||||
const ImBots = React.lazy(() => import('@/pages/admin/ImBots'));
|
const AdminUsers = safeLazy(() => import('@/pages/admin/Users'));
|
||||||
const PrivacySettings = React.lazy(() => import('@/pages/admin/PrivacySettings'));
|
const AdminModels = safeLazy(() => import('@/pages/admin/Models'));
|
||||||
const Promotion = React.lazy(() => import('@/pages/admin/Promotion'));
|
const AdminSiteSettings = safeLazy(() => import('@/pages/admin/SiteSettings'));
|
||||||
const Achievement = React.lazy(() => import('@/pages/admin/Achievement'));
|
const AdminSmsConfig = safeLazy(() => import('@/pages/admin/SmsConfig'));
|
||||||
const Tenant = React.lazy(() => import('@/pages/admin/Tenant'));
|
const AdminPayment = safeLazy(() => import('@/pages/admin/Payment'));
|
||||||
const Billing = React.lazy(() => import('@/pages/admin/Billing'));
|
const AdminServices = safeLazy(() => import('@/pages/admin/Services'));
|
||||||
const Analytics = React.lazy(() => import('@/pages/admin/Analytics'));
|
const AdminMembership = safeLazy(() => import('@/pages/admin/Membership'));
|
||||||
const AdminKnowledge = React.lazy(() => import('@/pages/admin/Knowledge'));
|
const AdminAds = safeLazy(() => import('@/pages/admin/Ads'));
|
||||||
const AdminWorkflow = React.lazy(() => import('@/pages/admin/Workflow'));
|
const AdminMarket = safeLazy(() => import('@/pages/admin/Market'));
|
||||||
const AdminStorage = React.lazy(() => import('@/pages/admin/Storage'));
|
const AdminMarketProducts = safeLazy(() => import('@/pages/admin/MarketProductsAdmin'));
|
||||||
const AdminDeveloper = React.lazy(() => import('@/pages/admin/Developer'));
|
const AdminLogs = safeLazy(() => import('@/pages/admin/Logs'));
|
||||||
const AdminDeveloperTools = React.lazy(() => import('@/pages/admin/DeveloperTools'));
|
const AdminSkills = safeLazy(() => import('@/pages/admin/Skills'));
|
||||||
const AdminAutomation = React.lazy(() => import('@/pages/admin/Automation'));
|
const AdminAgents = safeLazy(() => import('@/pages/admin/Agents'));
|
||||||
const AdminMcp = React.lazy(() => import('@/pages/admin/Mcp'));
|
const AdminCodeExec = safeLazy(() => import('@/pages/admin/CodeExec'));
|
||||||
const AdminApps = React.lazy(() => import('@/pages/admin/Apps'));
|
const DistributionBuilder = safeLazy(() => import('@/pages/admin/DistributionBuilder'));
|
||||||
const AssetCenter = React.lazy(() => import('@/pages/admin/AssetCenter'));
|
const ImBots = safeLazy(() => import('@/pages/admin/ImBots'));
|
||||||
const UserPortal = React.lazy(() => import('@/pages/UserPortal'));
|
const PrivacySettings = safeLazy(() => import('@/pages/admin/PrivacySettings'));
|
||||||
const WechatBot = React.lazy(() => import('@/pages/front/WechatBot'));
|
const Promotion = safeLazy(() => import('@/pages/admin/Promotion'));
|
||||||
const ImBotHub = React.lazy(() => import('@/pages/front/ImBotHub'));
|
const Achievement = safeLazy(() => import('@/pages/admin/Achievement'));
|
||||||
const AppServices = React.lazy(() => import('@/pages/front/AppServices'));
|
const Tenant = safeLazy(() => import('@/pages/admin/Tenant'));
|
||||||
const MarketProducts = React.lazy(() => import('@/pages/front/MarketProducts'));
|
const Billing = safeLazy(() => import('@/pages/admin/Billing'));
|
||||||
const MarketProductDetail = React.lazy(() => import('@/pages/front/MarketProductDetail'));
|
const Analytics = safeLazy(() => import('@/pages/admin/Analytics'));
|
||||||
const MarketProductsAdmin = React.lazy(() => import('@/pages/admin/MarketProductsAdmin'));
|
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>;
|
const pageFallback = <div className="loading-screen">加载中...</div>;
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user