perf(frontend): 拆分 vendor 包降低首屏体积

docs/Phase1-验收报告.md

@@ -173,19 +173,21 @@ listings   = ok，返回 1 件联调商品
 
 ## 4. 构建体积
 
-当前生产构建：
+当前生产构建（已做 vendor 分包）：
 
 ```text
-dist/assets/index-*.js                    886.81 kB │ gzip 289.33 kB
-dist/assets/AdminLayout-*.js               36.75 kB │ gzip 12.98 kB
-dist/assets/AdminDashboardPage-*.js       179.71 kB │ gzip 58.46 kB
-dist/assets/MobileHomePage-*.js            36.96 kB │ gzip 13.37 kB
-dist/assets/MobileListingDetailPage-*.js   27.31 kB │ gzip 10.70 kB
+dist/assets/index-*.js                    493.45 kB │ gzip 160.37 kB
+dist/assets/vendor-react-*.js             282.79 kB │ gzip  90.00 kB
+dist/assets/vendor-data-*.js               94.07 kB │ gzip  32.30 kB
+dist/assets/vendor-mobile-*.js            205.04 kB │ gzip  71.20 kB（仅 /m 路由加载）
+dist/assets/Table-*.js                    167.71 kB │ gzip  53.93 kB（后台表格按需）
+dist/assets/AdminOrdersPage-*.js           45.74 kB │ gzip  14.73 kB
+dist/assets/AdminLayout-*.js               36.87 kB │ gzip  13.02 kB
 ```
 
-**问题：** 首屏主包仍偏大，超过 Phase 1 目标。  
-**原因：** Ant Design 基础组件被首页与后台共享，当前 Rollup 仍把较大依赖合并进 index。  
-**下一步：** 在 Phase 1 后续批次做组件级按需、图表库延迟加载、后台页面进一步拆分，并引入包分析工具定位。
+**已优化：** 入口包从 886.81 kB 降到 493.45 kB，`vite build` 不再出现 >700 kB 警告；React、TanStack/Zustand/Axios、antd-mobile 分别拆成可缓存 vendor chunk，AntD Table/Pagination 仍留在后台页面懒加载链路中。
+
+**仍可继续：** 当前入口仍包含 AntD 共享基础设施；后续可把 PC 商城与移动端/后台拆成独立入口，进一步缩小 C 端首屏。
 
 ---
 

frontend/vite.config.ts

@@ -23,5 +23,25 @@ export default defineConfig({
   },
   build: {
     chunkSizeWarningLimit: 700,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (!id.includes('node_modules')) return undefined
+          if (id.includes('antd-mobile')) return 'vendor-mobile'
+          if (
+            id.includes('react-router') ||
+            id.includes('/react/') ||
+            id.includes('/react-dom/') ||
+            id.includes('/scheduler/')
+          ) {
+            return 'vendor-react'
+          }
+          if (id.includes('@tanstack') || id.includes('/zustand/') || id.includes('/axios/')) {
+            return 'vendor-data'
+          }
+          return undefined
+        },
+      },
+    },
   },
 })