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 webpack = require('webpack');
|
||||||
const { BundleAnalyzerPlugin } = process.env.ANALYZE ? require('webpack-bundle-analyzer') : { BundleAnalyzerPlugin: null };
|
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 = {
|
module.exports = {
|
||||||
webpack: {
|
webpack: {
|
||||||
configure: (webpackConfig, { env, paths }) => {
|
configure: (webpackConfig, { env, paths }) => {
|
||||||
@@ -27,7 +30,7 @@ module.exports = {
|
|||||||
chunks: 'all',
|
chunks: 'all',
|
||||||
maxInitialRequests: 30,
|
maxInitialRequests: 30,
|
||||||
minSize: 20000,
|
minSize: 20000,
|
||||||
maxSize: 244000, // 限制单个 chunk 最大大小(约 244KB)
|
maxSize: 512000, // 限制单个 chunk 最大大小(512KB,与 performance.maxAssetSize 一致)
|
||||||
cacheGroups: {
|
cacheGroups: {
|
||||||
// React 核心库单独分离
|
// React 核心库单独分离
|
||||||
react: {
|
react: {
|
||||||
@@ -47,7 +50,7 @@ module.exports = {
|
|||||||
chakraUI: {
|
chakraUI: {
|
||||||
test: /[\\/]node_modules[\\/](@chakra-ui|@emotion)[\\/]/,
|
test: /[\\/]node_modules[\\/](@chakra-ui|@emotion)[\\/]/,
|
||||||
name: 'chakra-ui',
|
name: 'chakra-ui',
|
||||||
priority: 22,
|
priority: 23, // 从 22 改为 23,避免与 antd 优先级冲突
|
||||||
reuseExistingChunk: true,
|
reuseExistingChunk: true,
|
||||||
},
|
},
|
||||||
// Ant Design
|
// Ant Design
|
||||||
@@ -236,21 +239,31 @@ module.exports = {
|
|||||||
devMiddleware: {
|
devMiddleware: {
|
||||||
writeToDisk: false,
|
writeToDisk: false,
|
||||||
},
|
},
|
||||||
// 代理配置:将 /api 请求代理到后端服务器
|
|
||||||
proxy: {
|
// 调试日志
|
||||||
'/api': {
|
onListening: (devServer) => {
|
||||||
target: 'http://49.232.185.254:5001',
|
console.log(`[CRACO] Mock Mode: ${isMockMode() ? 'Enabled ✅' : 'Disabled ❌'}`);
|
||||||
changeOrigin: true,
|
console.log(`[CRACO] Proxy: ${isMockMode() ? 'Disabled (MSW intercepts)' : 'Enabled (forwarding to backend)'}`);
|
||||||
secure: false,
|
|
||||||
logLevel: 'debug',
|
|
||||||
},
|
|
||||||
'/concept-api': {
|
|
||||||
target: 'http://49.232.185.254:6801',
|
|
||||||
changeOrigin: true,
|
|
||||||
secure: false,
|
|
||||||
logLevel: 'debug',
|
|
||||||
pathRewrite: { '^/concept-api': '' },
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 代理配置:将 /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': '' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}),
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user