plotly / plotly/react-plotly.js

Javascript runs out of memory when making production build

未关闭
#130 5 条评论 2 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

主要语言
JavaScript
星标
1.1k
派生
138
平均合并
3 天 2 小时
30 天内合并 PR
4

描述

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.

贡献指南

这个仓库没有索引到贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

从 webpack.config.prod 开始,使用 npm run build 和链接的 CodeSandbox 重现失败;结合新增的 ify-loader 和 transform-loader 规则,检查报告的 stack trace 中的 terser 条目。对于所报告的设置,生产构建在没有 JavaScript heap out-of-memory 失败的情况下完成,即视为完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
javascript, react, webpack
领域
build-system, frontend
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
需要澄清
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。