From b3258e76df7911118d096bb12f031b2ac6055929 Mon Sep 17 00:00:00 2001 From: lanyuanxiaoyao Date: Thu, 23 Apr 2026 00:26:54 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E5=89=8D=E7=AB=AF=E6=89=93=E5=8C=85?= =?UTF-8?q?=E4=BA=A7=E7=89=A9=E4=BC=98=E5=8C=96=E2=80=94=E2=80=94=E8=B7=AF?= =?UTF-8?q?=E7=94=B1=E7=BA=A7=E6=87=92=E5=8A=A0=E8=BD=BD=E5=92=8C=20vendor?= =?UTF-8?q?=20=E5=88=86=E5=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 使用 React.lazy() + Suspense 实现路由级代码分割 - 配置 manualChunks 将 react/tdesign/recharts 拆分为独立 vendor chunk - 页面组件改为 export default 以支持动态导入 - 新增 bundle-optimization 规范，更新 frontend 导航规范 --- frontend/src/pages/NotFound.tsx | 2 +- frontend/src/pages/Providers/index.tsx | 2 +- frontend/src/pages/Settings/index.tsx | 2 +- frontend/src/pages/Stats/index.tsx | 2 +- frontend/src/routes/index.tsx | 31 +++++++------ frontend/vite.config.ts | 22 +++++++++ openspec/specs/bundle-optimization/spec.md | 52 ++++++++++++++++++++++ openspec/specs/frontend/spec.md | 19 +++++--- 8 files changed, 109 insertions(+), 23 deletions(-) create mode 100644 openspec/specs/bundle-optimization/spec.md diff --git a/frontend/src/pages/NotFound.tsx b/frontend/src/pages/NotFound.tsx index 3ef8b7c..d8ee42c 100644 --- a/frontend/src/pages/NotFound.tsx +++ b/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 ( diff --git a/frontend/src/pages/Providers/index.tsx b/frontend/src/pages/Providers/index.tsx index 15ea951..e35ed7e 100644 --- a/frontend/src/pages/Providers/index.tsx +++ b/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(); diff --git a/frontend/src/pages/Settings/index.tsx b/frontend/src/pages/Settings/index.tsx index a77fc59..1aeff76 100644 --- a/frontend/src/pages/Settings/index.tsx +++ b/frontend/src/pages/Settings/index.tsx @@ -1,6 +1,6 @@ import { Card } from 'tdesign-react'; -export function SettingsPage() { +export default function SettingsPage() { return (
diff --git a/frontend/src/pages/Stats/index.tsx b/frontend/src/pages/Stats/index.tsx index 0267963..7c9c9e9 100644 --- a/frontend/src/pages/Stats/index.tsx +++ b/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(); diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx index 54dad2c..b2c518d 100644 --- a/frontend/src/routes/index.tsx +++ b/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'; -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 ( - - }> - } /> - } /> - } /> - } /> - } /> - - + }> + + }> + } /> + } /> + } /> + } /> + } /> + + + ); } diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index 39e3608..3a96b07 100644 --- a/frontend/vite.config.ts +++ b/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 = { + '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 + } + } + } + }, + }, + }, + }, }) diff --git a/openspec/specs/bundle-optimization/spec.md b/openspec/specs/bundle-optimization/spec.md new file mode 100644 index 0000000..ce6994f --- /dev/null +++ b/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 包裹在 `` 外层 + +### 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`） diff --git a/openspec/specs/frontend/spec.md b/openspec/specs/frontend/spec.md index 9be03db..aeed498 100644 --- a/openspec/specs/frontend/spec.md +++ b/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** \`/stats\` 路径 SHALL 显示用量统计页面 -- **THEN** \`/\` 路径 SHALL 重定向到 \`/providers\` +- **THEN** `/providers` 路径 SHALL 显示供应商管理页面 +- **THEN** `/stats` 路径 SHALL 显示用量统计页面 +- **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 同步