🧐[问题] JavaScript heap out of memory

[theDoinb]

🧐 问题描述 [详细地描述问题，让大家都能理解]

直接 import { Bar } from '@ant-design/charts'; 服务就挂了，然后出现内存溢出

💻 示例代码 [如果有必要，展示代码，线上示例，或仓库]

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: 00007FF75ADA121A v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+4810
2: 00007FF75AD7A5B6 node::MakeCallback+4518
3: 00007FF75AD7AFA0 node_module_register+2160
4: 00007FF75B00B3EE v8::internal::FatalProcessOutOfMemory+846
5: 00007FF75B00B31F v8::internal::FatalProcessOutOfMemory+639
6: 00007FF75B549304 v8::internal::Heap::MaxHeapGrowingFactor+11476
7: 00007FF75B53FA67 v8::internal::ScavengeJob::operator=+25543
8: 00007FF75B53DFDC v8::internal::ScavengeJob::operator=+18748
9: 00007FF75B546F57 v8::internal::Heap::MaxHeapGrowingFactor+2343
10: 00007FF75B546FD6 v8::internal::Heap::MaxHeapGrowingFactor+2470
11: 00007FF75B0E9A5B v8::internal::Factory::AllocateRawWithImmortalMap+59
12: 00007FF75B0EC55D v8::internal::Factory::NewRawTwoByteString+77
13: 00007FF75B1CCEEB std::vector<v8::internal::compiler::MoveOperands * __ptr64,v8::internal::ZoneAllocator<v8::internal::compiler::MoveOperands * __ptr64> >::empty+56779
14: 00007FF75B51111F v8::internal::interpreter::operator<<+59679
15: 00007FF75B50F0F2 v8::internal::interpreter::operator<<+51442
16: 00007FF75B50D56D v8::internal::interpreter::operator<<+44397
17: 00007FF75B50A58C v8::internal::interpreter::operator<<+32140
18: 00007FF75B1D9D46 v8::internal::CodeStubAssembler::ConstexprBoolNot+39446
19: 00007FF75B1D9C3B v8::internal::CodeStubAssembler::ConstexprBoolNot+39179
20: 0000035F1C5DC721

🚑 其他信息 [如截图等其他信息可以贴在这里]

react: 16.8.0，
ant-design-pro: v2
可能的原因是？

[lxfu1]

应该是 ant-design-pro 底层有其它图表库， CDN 的方式试试 https://charts.ant.design/guide/start#cdn

[theDoinb]

试了下CDN，开始可用，但是再编译下又挂了，直接用g2plot 就不会，不过还是react这种方便点，不用考虑container 和 id

[AJ1219]

有同样的困扰, 怎么搞

[lxfu1]

有同样的困扰, 怎么搞

能提供一下复现代码吗？

[YoLoveLife]

@lxfu1 遇到了同样的问题，现象就是引入了@ant-design/charts以后，项目就无法编译打包了。
但是切换环境使用别的电脑来编译打包又是成功的，很令人疑惑。

[lxfu1]

webpack/webpack#6389 (comment)

[matiasfacio]

hi! I have followed what the suggestion of @lxfu1 but I still can not make it work. Is there another way to overcome this error? I have tried many things already and the only thing that worked was to remove this library.... crazy...
Any help, please?

[lxfu1]

hi! I have followed what the suggestion of @lxfu1 but I still can not make it work. Is there another way to overcome this error? I have tried many things already and the only thing that worked was to remove this library.... crazy... Any help, please?

 import { Bar } from '@ant-design/plots'

[matiasfacio]

hi! I have followed what the suggestion of @lxfu1 but I still can not make it work. Is there another way to overcome this error? I have tried many things already and the only thing that worked was to remove this library.... crazy... Any help, please?

 import { Bar } from '@ant-design/plots'

@lxfu1 thank you for your quick reply. I am using 'Column' and already importing in this way:
import { Column } from '@ant-design/plots';
and this still won't work.
Could it be something else ?

In my package.json I have added a script as suggested by the link you have shared:
node --max_old_space_size=8196 ./node_modules/webpack/bin/webpack.js

And this is the error log:

Creating an optimized production build... <--- Last few GCs ---> [86:0x6766920] 360650 ms: Mark-sweep 1828.2 (1880.7) -> 1824.6 (1881.0) MB, 4405.6 / 0.0 ms (average mu = 0.119, current mu = 0.015) allocation failure; scavenge might not succeed [86:0x6766920] 365200 ms: Mark-sweep 1828.7 (1881.0) -> 1825.1 (1881.5) MB, 4489.4 / 0.0 ms (average mu = 0.067, current mu = 0.013) allocation failure; scavenge might not succeed <--- JS stacktrace ---> FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 1: 0xb6e500 node::Abort() [/usr/local/bin/node] 2: 0xa7e632 [/usr/local/bin/node] 3: 0xd47ea0 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node] 4: 0xd48247 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node] 5: 0xf2[56](https://gitlab.com/parkhere/pcs/frontend/work-dashboard/-/jobs/4181633759#L56)05 [/usr/local/bin/node] 6: 0xf26508 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/usr/local/bin/node] 7: 0xf36a13 [/usr/local/bin/node] 8: 0xf37888 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node] 9: 0xf121ee v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node] 10: 0xf135b7 v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node] 11: 0xef478a v8::internal::Factory::NewFillerObject(int, v8::internal::AllocationAlignment, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/usr/local/bin/node] 12: 0x12b7d2f v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node] 13: 0x16e9979 [/usr/local/bin/node]

[lxfu1]

Webpack externals?

[matiasfacio]

@lxfu1 don't think so, but why would it be ? When removing ant it works as usual, I don't even need to add more memory to Webpack.

[matiasfacio]

@lxfu1 I am actually using create-react-app, where the configuration of Webpack is kind of hidden and when possible, avoid to eject. I have added webpack cli because that was the only way I could give more mem to the build. Is there another way of doing this?

[matiasfacio]

I might have a fix which works well in my case. I used dynamic import and added this to the build script in the package.json file: ./node_modules/react-scripts/bin/react-scripts --max_old_space_size=4096 build

I am using React.lazy to import the Component I need on demand:

const Column = lazy(() => import('@ant-design/plots/lib/components/column'));
did it. Hope it helps anyone in despair.