perf: 前端打包产物优化——路由级懒加载和 vendor 分包
- 使用 React.lazy() + Suspense 实现路由级代码分割 - 配置 manualChunks 将 react/tdesign/recharts 拆分为独立 vendor chunk - 页面组件改为 export default 以支持动态导入 - 新增 bundle-optimization 规范,更新 frontend 导航规范
This commit is contained in:
@@ -1,20 +1,25 @@
|
||||
import { lazy, Suspense } from 'react';
|
||||
import { Routes, Route, Navigate } from 'react-router';
|
||||
import { Loading } from 'tdesign-react';
|
||||
import { AppLayout } from '@/components/AppLayout';
|
||||
import { ProvidersPage } from '@/pages/Providers';
|
||||
import { StatsPage } from '@/pages/Stats';
|
||||
import { SettingsPage } from '@/pages/Settings';
|
||||
import { NotFound } from '@/pages/NotFound';
|
||||
|
||||
const ProvidersPage = lazy(() => import('@/pages/Providers'));
|
||||
const StatsPage = lazy(() => import('@/pages/Stats'));
|
||||
const SettingsPage = lazy(() => import('@/pages/Settings'));
|
||||
const NotFound = lazy(() => import('@/pages/NotFound'));
|
||||
|
||||
export function AppRoutes() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route element={<AppLayout />}>
|
||||
<Route index element={<Navigate to="/providers" replace />} />
|
||||
<Route path="providers" element={<ProvidersPage />} />
|
||||
<Route path="stats" element={<StatsPage />} />
|
||||
<Route path="settings" element={<SettingsPage />} />
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
<Suspense fallback={<Loading />}>
|
||||
<Routes>
|
||||
<Route element={<AppLayout />}>
|
||||
<Route index element={<Navigate to="/providers" replace />} />
|
||||
<Route path="providers" element={<ProvidersPage />} />
|
||||
<Route path="stats" element={<StatsPage />} />
|
||||
<Route path="settings" element={<SettingsPage />} />
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user