plotly / plotly/react-plotly.js

Javascript runs out of memory when making production build

Offen
#130 5 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
JavaScript
Sterne
1.1k
Forks
138
Ø Merge
3 T. 2 Std.
Gemergte PRs (30 T.)
4

Beschreibung

When I try to build a prod version of my create-react-app 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

I tried to use the workaround suggested in https://github.com/plotly/react-plotly.js/issues/26#issuecomment-359925194

I inserted the preset in webpack.config.prod file, with
{ test: /\.js$/, use: 'ify-loader', }, { test: /\.js$/, use: 'transform-loader?plotly.js/tasks/compress_attributes.js', },

But it still runs out of memory when I do npm run 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.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit webpack.config.prod und reproduziere den Fehler mit npm run build und der verlinkten CodeSandbox; untersuche den terser-Eintrag im gemeldeten Stacktrace zusammen mit den hinzugefügten ify-loader- und transform-loader-Regeln. Als erledigt gilt die Aufgabe, wenn der Produktions-Build für das gemeldete Setup ohne den JavaScript-Heap-Out-of-Memory-Fehler abgeschlossen wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react, webpack
Bereich
build-system, frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.