perf: 前端打包产物优化——路由级懒加载和 vendor 分包

- 使用 React.lazy() + Suspense 实现路由级代码分割
- 配置 manualChunks 将 react/tdesign/recharts 拆分为独立 vendor chunk
- 页面组件改为 export default 以支持动态导入
- 新增 bundle-optimization 规范，更新 frontend 导航规范

frontend/src/pages/NotFound.tsx

@@ -1,7 +1,7 @@
 import { Button } from 'tdesign-react';
 import { useNavigate } from 'react-router';
 
-export function NotFound() {
+export default function NotFound() {
   const navigate = useNavigate();
 
   return (

frontend/src/pages/Providers/index.tsx

@@ -6,7 +6,7 @@ import { ProviderTable } from './ProviderTable';
 import { ProviderForm } from './ProviderForm';
 import { ModelForm } from './ModelForm';
 
-export function ProvidersPage() {
+export default function ProvidersPage() {
   const { data: providers = [], isLoading } = useProviders();
   const createProvider = useCreateProvider();
   const updateProvider = useUpdateProvider();

frontend/src/pages/Settings/index.tsx

@@ -1,6 +1,6 @@
 import { Card } from 'tdesign-react';
 
-export function SettingsPage() {
+export default function SettingsPage() {
   return (
     <Card title="设置">
       <div style={{ textAlign: 'center', padding: '40px 0', color: 'var(--td-text-color-placeholder)' }}>

frontend/src/pages/Stats/index.tsx

@@ -5,7 +5,7 @@ import { StatCards } from './StatCards';
 import { UsageChart } from './UsageChart';
 import { StatsTable } from './StatsTable';
 
-export function StatsPage() {
+export default function StatsPage() {
   const { data: providers = [] } = useProviders();
 
   const [providerId, setProviderId] = useState<string | undefined>();

frontend/src/routes/index.tsx

@@ -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';
+const ProvidersPage = lazy(() => import('@/pages/Providers'));
-import { SettingsPage } from '@/pages/Settings';
+const StatsPage = lazy(() => import('@/pages/Stats'));
-import { NotFound } from '@/pages/NotFound';
+const SettingsPage = lazy(() => import('@/pages/Settings'));
+const NotFound = lazy(() => import('@/pages/NotFound'));
 
 export function AppRoutes() {
   return (
-    <Routes>
+    <Suspense fallback={<Loading />}>
-      <Route element={<AppLayout />}>
+      <Routes>
-        <Route index element={<Navigate to="/providers" replace />} />
+        <Route element={<AppLayout />}>
-        <Route path="providers" element={<ProvidersPage />} />
+          <Route index element={<Navigate to="/providers" replace />} />
-        <Route path="stats" element={<StatsPage />} />
+          <Route path="providers" element={<ProvidersPage />} />
-        <Route path="settings" element={<SettingsPage />} />
+          <Route path="stats" element={<StatsPage />} />
-        <Route path="*" element={<NotFound />} />
+          <Route path="settings" element={<SettingsPage />} />
-      </Route>
+          <Route path="*" element={<NotFound />} />
-    </Routes>
+        </Route>
+      </Routes>
+    </Suspense>
   );
 }

frontend/vite.config.ts

@@ -2,6 +2,12 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import path from 'node:path'
 
+const vendorChunks: Record<string, string[]> = {
+  'vendor-react': ['react', 'react-dom', 'react-router'],
+  'vendor-tdesign': ['tdesign-react', 'tdesign-icons-react'],
+  'vendor-recharts': ['recharts'],
+}
+
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
@@ -18,4 +24,20 @@ export default defineConfig({
       },
     },
   },
+  build: {
+    chunkSizeWarningLimit: 700,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          for (const [chunkName, modules] of Object.entries(vendorChunks)) {
+            for (const mod of modules) {
+              if (id.includes(`/node_modules/${mod}/`)) {
+                return chunkName
+              }
+            }
+          }
+        },
+      },
+    },
+  },
 })

openspec/specs/bundle-optimization/spec.md

@@ -0,0 +1,52 @@
+# 前端构建包优化
+
+## Purpose
+
+TBD - 配置 Vite 构建优化策略，包括路由级代码分割和 Vendor 分包
+
+## Requirements
+
+### Requirement: 路由级代码分割
+
+前端 SHALL 使用 `React.lazy()` 和动态 `import()` 实现路由级代码分割，每个页面组件按需加载。
+
+#### Scenario: 页面组件懒加载
+
+- **WHEN** 应用启动
+- **THEN** 路由配置 SHALL 使用 `lazy(() => import(...))` 导入所有页面组件（ProvidersPage、StatsPage、SettingsPage、NotFound）
+- **THEN** 页面组件 SHALL NOT 使用静态 `import` 语句直接导入
+
+#### Scenario: Suspense 加载边界
+
+- **WHEN** 页面 chunk 尚未加载完成
+- **THEN** 路由出口 SHALL 显示 TDesign `Loading` 组件作为 fallback
+- **THEN** `Suspense` 边界 SHALL 包裹在 `<Routes>` 外层
+
+### Requirement: Vendor 分包
+
+前端 SHALL 配置 Vite `build.rollupOptions.output.manualChunks` 将第三方库拆分为独立 chunk。
+
+#### Scenario: React 核心 chunk
+
+- **WHEN** 执行生产构建
+- **THEN** react、react-dom、react-router SHALL 被打包为独立 chunk（vendor-react）
+
+#### Scenario: TDesign chunk
+
+- **WHEN** 执行生产构建
+- **THEN** tdesign-react、tdesign-icons-react SHALL 被打包为独立 chunk（vendor-tdesign）
+
+#### Scenario: Recharts chunk
+
+- **WHEN** 执行生产构建
+- **THEN** recharts SHALL 被打包为独立 chunk（vendor-recharts）
+
+#### Scenario: chunk 告警阈值
+
+- **WHEN** 执行生产构建
+- **THEN** `build.chunkSizeWarningLimit` SHALL 设置为 700，避免 vendor chunk 误触发告警
+
+#### Scenario: chunk 命名
+
+- **WHEN** 执行生产构建
+- **THEN** vendor chunk 文件名 SHALL 包含 chunk 名称前缀（如 `vendor-react-[hash].js`）

openspec/specs/frontend/spec.md

@@ -422,23 +422,30 @@ TBD - 提供供应商、模型配置和用量统计的前端管理界面
 
 ### Requirement: 提供导航
 
-前端 SHALL 使用 React Router v7 提供导航。
+前端 SHALL 使用 React Router v7 提供导航，并支持路由级懒加载。
 
 #### Scenario: 路由配置
 
 - **WHEN** 应用启动
 - **THEN** 前端 SHALL 使用 React Router v7 Library 模式（BrowserRouter）
-- **THEN** \`/providers\` 路径 SHALL 显示供应商管理页面
+- **THEN** `/providers` 路径 SHALL 显示供应商管理页面
-- **THEN** \`/stats\` 路径 SHALL 显示用量统计页面
+- **THEN** `/stats` 路径 SHALL 显示用量统计页面
-- **THEN** \`/\` 路径 SHALL 重定向到 \`/providers\`
+- **THEN** `/` 路径 SHALL 重定向到 `/providers`
 - **THEN** 不存在的路径 SHALL 显示 404 页面
 
+#### Scenario: 路由级懒加载
+
+- **WHEN** 用户访问某个路由
+- **THEN** 前端 SHALL 使用 `React.lazy()` 按需加载对应页面组件
+- **THEN** 页面组件加载期间 SHALL 显示 TDesign `Loading` 组件作为 fallback
+- **THEN** 所有页面组件 SHALL 通过动态 `import()` 导入
+
 #### Scenario: 导航菜单
 
 - **WHEN** 用户点击导航中的"供应商管理"
-- **THEN** 前端 SHALL 导航到 \`/providers\` 并高亮当前菜单项
+- **THEN** 前端 SHALL 导航到 `/providers` 并高亮当前菜单项
 - **WHEN** 用户点击导航中的"用量统计"
-- **THEN** 前端 SHALL 导航到 \`/stats\` 并高亮当前菜单项
+- **THEN** 前端 SHALL 导航到 `/stats` 并高亮当前菜单项
 
 #### Scenario: URL 同步