Plotly.js: Javascript runs out of memory when making production build

[arshbhatti8]

When I try to build a prod version of my create-react-app (and hence webpack) using npm run build, I get the following error:

<--- Last few GCs --->

[7898:0x104800000] 66632 ms: Mark-sweep 1329.1 (1449.4) -> 1317.7 (1451.4) MB, 564.0 /
0.0 ms (average mu = 0.110, current mu = 0.031) allocation failure scavenge might not succeed
[7898:0x104800000] 67209 ms: Mark-sweep 1331.4 (1451.4) -> 1320.0 (1453.9) MB, 559.9 /
0.0 ms (average mu = 0.072, current mu = 0.030) allocation failure scavenge might not succeed

<--- JS stacktrace --->

==== JS stack trace =========================================

0: ExitFrame [pc: 0x1c05060cfc7d]
1: StubFrame [pc: 0x1c05060c8bd9] 
Security context: 0x298c12a1d949 <JSObject>
2: split [0x298c12a0f5c9](this=0x298c12a22391 <String[1]: 4>,0x298c508c3b91 <JSRegExp 
<String[5]: \r?\n>>)
3: I [0x298cef46c9f1] [/Users/arshpreetsinghbhatti/Desktop/portal- 
ui/node_modules/terser/dist/bundle.js:~44] [pc=0x1c050616d8f8](this=0x298cef46ca71 <Object 
map = 0x298c72bc68b1>,0x298c12a22391 <String[1]: 4...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out 
of memory

Writing Node.js report to file: report.20190304.101657.7898.001.json
Node.js report completed
1: 0x10006313d node::Abort() [/usr/local/bin/node]
2: 0x100063894 node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
3: 0x1001a5ca7 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) 
[/usr/local/bin/node]
4: 0x1001a5c44 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, 
bool) [/usr/local/bin/node]
5: 0x1005aada2 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
6: 0x1005ad2d3 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) 
[/usr/local/bin/node]
7: 0x1005a9808 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, 
v8::GCCallbackFlags) [/usr/local/bin/node]
8: 0x1005a79c5 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, 
v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
9: 0x1005b426c v8::internal::Heap::AllocateRawWithLightRetry(int, v8::internal::AllocationSpace, 
v8::internal::AllocationAlignment) [/usr/local/bin/node]
10: 0x1005b42ef v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, 
v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0x1005834e4 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) 
 [/usr/local/bin/node]
12: 0x100835a04 v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, 
v8::internal::Isolate*) [/usr/local/bin/node]
13: 0x1c05060cfc7d

The production version builds fine when I use --max_old_space_size=8192 and takes about ~2 mins to build.

Here's a sandbox for reference: https://codesandbox.io/s/381yjyn415

I've taken the liberty of adding all the dependencies that I use in my project.

[etpinard]

Thanks for the report.

I'm not sure what we can do to help. Is there a way for a library to tell webpack to increase to available memory (via its package.json I guess)?

To help us out, could you provide the underlying webpack command?

[arshbhatti8]

As I said in the original issue, I can increase the heap size to use 8,12,16 gigs (react-scripts --max_old_space_size=8192 build) and it works. But I think it shouldn't have to come to that. The build process shouldn't use this much memory.

[etpinard]

The build process shouldn't use this much memory.

So essentially you're asking us to reduce the size of our src folder? That's a fair request, but I doubt we'll be able to trim it significantly in the short term as we're planning on adding many new trace types.

I'd recommend instead using our "partial bundles" in your app:

https://github.com/plotly/plotly.js/tree/master/dist#partial-bundles

for example maybe try using plotly.js-basic-dist?

[arshbhatti8]

Thank you for all the quick responses though ! I think I could use it, but since I am using your react wrapper (React-Plotly.js), I don't know if that package/library has some underlying dependencies on the overall plotly.js library.

On NPM, react-plotly.js has plotly.js listed as a dependency. If it does, then I don't know if I can use this solution.

[alexcjohnson]

@arshbhatti8 yes, you can use react-plotly.js with different bundles - see this section of its readme:
https://github.com/plotly/react-plotly.js#customizing-the-plotlyjs-bundle

[etpinard]

Closing as this ticket won't directly lead to any PRs in this repo.

@arshbhatti8 if you any other issues with react-plotly.js + custom plotly.js bundles, please use our community formus at https://community.plot.ly/c/plotly-js

Thank you!

[arshbhatti8]

@alexcjohnson I related to your comment and found out there is a way to use smaller bundles with react-plotly.js as well using their createPlotlyComponent. Thank you ! That's exactly what I needed.