From d4c731730f90dcc30beca96541329823646593dc Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 5 Nov 2025 13:12:51 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20Mock=20=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E4=B8=8B=20webpack=20proxy=20=E9=85=8D=E7=BD=AE?=
 =?UTF-8?q?=E5=92=8C=E4=BC=98=E5=8C=96=E6=9E=84=E5=BB=BA=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题：
1. Mock 模式下 webpack devServer proxy 在服务器层转发请求，导致 MSW 无法拦截
2. Chakra UI 和 Ant Design 的 cacheGroups priority 相同（22），可能导致分割冲突
3. maxSize 限制 244KB 过小，导致中型库过度分割
4. 缺少 Mock 模式调试日志

修复：
1. 添加 isMockMode() 工具函数（与 apiConfig.js 保持一致）
2. Mock 模式下禁用 proxy，让 MSW 在浏览器层拦截请求
3. 添加 onListening 钩子打印 Mock 模式和 Proxy 状态
4. 修复 Chakra UI priority: 22 → 23（避免与 Ant Design 冲突）
5. 优化 maxSize: 244KB → 512KB（与 performance.maxAssetSize 一致）

效果：
- Mock 模式：proxy 禁用 → MSW 拦截 → 返回 mock 数据 ✅
- 真实后端：proxy 启用 → 转发到后端服务器 ✅
- 减少过度分割，降低 HTTP 请求数，提升加载性能

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 craco.config.js | 47 ++++++++++++++++++++++++++++++-----------------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/craco.config.js b/craco.config.js
index 6da6ae88..9072329a 100644
--- a/craco.config.js
+++ b/craco.config.js
@@ -2,6 +2,9 @@ const path = require('path');
 const webpack = require('webpack');
 const { BundleAnalyzerPlugin } = process.env.ANALYZE ? require('webpack-bundle-analyzer') : { BundleAnalyzerPlugin: null };
 
+// 检查是否为 Mock 模式（与 src/utils/apiConfig.js 保持一致）
+const isMockMode = () => process.env.REACT_APP_ENABLE_MOCK === 'true';
+
 module.exports = {
   webpack: {
     configure: (webpackConfig, { env, paths }) => {
@@ -27,7 +30,7 @@ module.exports = {
             chunks: 'all',
             maxInitialRequests: 30,
             minSize: 20000,
-            maxSize: 244000, // 限制单个 chunk 最大大小（约 244KB）
+            maxSize: 512000, // 限制单个 chunk 最大大小（512KB，与 performance.maxAssetSize 一致）
             cacheGroups: {
               // React 核心库单独分离
               react: {
@@ -47,7 +50,7 @@ module.exports = {
               chakraUI: {
                 test: /[\\/]node_modules[\\/](@chakra-ui|@emotion)[\\/]/,
                 name: 'chakra-ui',
-                priority: 22,
+                priority: 23, // 从 22 改为 23，避免与 antd 优先级冲突
                 reuseExistingChunk: true,
               },
               // Ant Design
@@ -236,21 +239,31 @@ module.exports = {
     devMiddleware: {
       writeToDisk: false,
     },
-    // 代理配置：将 /api 请求代理到后端服务器
-    proxy: {
-      '/api': {
-        target: 'http://49.232.185.254:5001',
-        changeOrigin: true,
-        secure: false,
-        logLevel: 'debug',
-      },
-      '/concept-api': {
-        target: 'http://49.232.185.254:6801',
-        changeOrigin: true,
-        secure: false,
-        logLevel: 'debug',
-        pathRewrite: { '^/concept-api': '' },
-      },
+
+    // 调试日志
+    onListening: (devServer) => {
+      console.log(`[CRACO] Mock Mode: ${isMockMode() ? 'Enabled ✅' : 'Disabled ❌'}`);
+      console.log(`[CRACO] Proxy: ${isMockMode() ? 'Disabled (MSW intercepts)' : 'Enabled (forwarding to backend)'}`);
     },
+
+    // 代理配置：将 /api 请求代理到后端服务器
+    // 注意：Mock 模式下禁用 proxy，让 MSW 拦截请求
+    ...(isMockMode() ? {} : {
+      proxy: {
+        '/api': {
+          target: 'http://49.232.185.254:5001',
+          changeOrigin: true,
+          secure: false,
+          logLevel: 'debug',
+        },
+        '/concept-api': {
+          target: 'http://49.232.185.254:6801',
+          changeOrigin: true,
+          secure: false,
+          logLevel: 'debug',
+          pathRewrite: { '^/concept-api': '' },
+        },
+      },
+    }),
   },
 };