diff --git a/craco.config.js b/craco.config.js index a39c59f5..b2f871d4 100644 --- a/craco.config.js +++ b/craco.config.js @@ -39,6 +39,13 @@ module.exports = { priority: 30, reuseExistingChunk: true, }, + // TradingView Lightweight Charts 单独分离(避免被压缩破坏) + lightweightCharts: { + test: /[\\/]node_modules[\\/]lightweight-charts[\\/]/, + name: 'lightweight-charts', + priority: 26, + reuseExistingChunk: true, + }, // 大型图表库分离(echarts, d3, apexcharts 等) charts: { test: /[\\/]node_modules[\\/](echarts|echarts-for-react|apexcharts|react-apexcharts|recharts|d3|d3-.*)[\\/]/, @@ -96,8 +103,31 @@ module.exports = { moduleIds: 'deterministic', // 最小化配置 minimize: true, + minimizer: [ + ...webpackConfig.optimization.minimizer, + ], }; + // 配置 Terser 插件,保留 lightweight-charts 的方法名 + const TerserPlugin = require('terser-webpack-plugin'); + webpackConfig.optimization.minimizer = webpackConfig.optimization.minimizer.map(plugin => { + if (plugin.constructor.name === 'TerserPlugin') { + return new TerserPlugin({ + ...plugin.options, + terserOptions: { + ...plugin.options.terserOptions, + keep_classnames: /^(IChartApi|ISeriesApi|Re)$/, // 保留 lightweight-charts 的类名 + keep_fnames: /^(createChart|addLineSeries|addSeries)$/, // 保留关键方法名 + mangle: { + ...plugin.options.terserOptions.mangle, + reserved: ['createChart', 'addLineSeries', 'addSeries', 'IChartApi', 'ISeriesApi'], + }, + }, + }); + } + return plugin; + }); + // 生产环境禁用 source map 以加快构建(可节省 40-60% 时间) webpackConfig.devtool = false; } else { diff --git a/src/views/DataBrowser/TradingViewChart.tsx b/src/views/DataBrowser/TradingViewChart.tsx index 4f82c7fb..8f9dbb4a 100644 --- a/src/views/DataBrowser/TradingViewChart.tsx +++ b/src/views/DataBrowser/TradingViewChart.tsx @@ -129,14 +129,23 @@ const TradingViewChart: React.FC = ({ // 调试信息 console.log('📈 Chart 对象:', chart); console.log('📈 Chart 类型:', typeof chart); - console.log('📈 Chart 的方法:', Object.keys(chart)); + console.log('📈 Chart 的所有属性名:', Object.keys(chart)); + console.log('📈 Chart 的所有方法名:', Object.getOwnPropertyNames(Object.getPrototypeOf(chart))); console.log('📈 addLineSeries 存在?', typeof chart.addLineSeries); + console.log('📈 addSeries 存在?', typeof chart.addSeries); + console.log('📈 Chart 原型:', Object.getPrototypeOf(chart)); // 检查 chart 对象是否有效 if (!chart || typeof chart.addLineSeries !== 'function') { console.error('❌ createChart 返回的对象无效!'); console.error('Chart 对象:', chart); - throw new Error('createChart 返回的对象没有 addLineSeries 方法'); + console.error('尝试查找所有包含 "series" 的方法:'); + const allProps = Object.getOwnPropertyNames(Object.getPrototypeOf(chart)); + const seriesMethods = allProps.filter(prop => prop.toLowerCase().includes('series')); + console.error('包含 series 的方法:', seriesMethods); + + // 不要立即抛出错误,先尝试使用可能的替代方法 + console.warn('⚠️ 尝试使用其他可能的方法名...'); } // 创建折线系列 (lightweight-charts 5.0 标准 API)