plotly / plotly/react-plotly.js
Javascript runs out of memory when making production build
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- JavaScript
- Star
- 1.1k
- Fork
- 138
- Merge trung bình
- 3 ngày 2 giờ
- Pull request đã merge (30 ngày)
- 4
Mô tả
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.
Hướng dẫn đóng góp
Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
Bắt đầu với webpack.config.prod và tái hiện lỗi bằng npm run build cùng CodeSandbox được liên kết; kiểm tra mục terser trong stack trace được báo cáo cùng với các rule ify-loader và transform-loader đã thêm. Công việc được xem là hoàn tất khi bản build production hoàn thành mà không gặp lỗi JavaScript heap out-of-memory đối với setup đã báo cáo.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- javascript, react, webpack
- Lĩnh vực
- build-system, frontend
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Cần làm rõ
- Mức phù hợp với người mới
- 35/100