fix: 修复 Mock 模式下 webpack proxy 配置和优化构建配置

问题:
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>
This commit is contained in:
zdl
2025-11-05 13:12:51 +08:00
parent fe9b3034a1
commit d4c731730f

View File

@@ -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,7 +239,16 @@ module.exports = {
devMiddleware: {
writeToDisk: false,
},
// 调试日志
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',
@@ -252,5 +264,6 @@ module.exports = {
pathRewrite: { '^/concept-api': '' },
},
},
}),
},
};