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:
@@ -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': '' },
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user