使用 Create React App 和 Plotly.js 时出现内存不足错误

Question

<--- Last few GCs --->

[972:000001913A837320]    40900 ms: Mark-sweep 2049.2 (2066.3) -> 2047.3 (2059.3) MB, 2062.9 / 0.1 ms  (+ 179.6 ms in 113 steps since start of marking, biggest step 8.9 ms, walltime since start of marking 2512 ms) (average mu = 0.153, current mu = 0.107) [972:000001913A837320]    42835 ms: Mark-sweep 2048.8 (2059.3) -> 2047.7 (2057.8) MB, 1845.1 / 0.0 
ms  (+ 81.8 ms in 23 steps since start of marking, biggest step 9.0 ms, walltime since start of marking 1935 ms) (average mu = 0.084, current mu = 0.004) al

<--- JS stacktrace --->

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

    0: ExitFrame [pc: 00007FF68A20B3BD]
Security context: 0x002c4c9808d1 <JSObject>
    1: _append [000002A11D9F9439] [D:\ReactProjects\plotlytest\myplotlysite\node_modules\@babel\generator\lib\buffer.js:~99] [pc=0000014BCF9DB744](this=0x03160f6401b1 <Buffer map = 000000A495510339>,0x02ab7a1c78c9 <String[#1]:  >,151182,27,0x02ab7a1c01b9 <null>,0x02ab7a1c04b1 <undefined>,0x02ab7a1c06e9 <false>)
    2: append [000002A11D9F9391] [D:\ReactPro...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF6895F5EBF napi_wrap+114095
 2: 00007FF6895A0B46 v8::base::CPU::has_sse+66998
 3: 00007FF6895A1946 v8::base::CPU::has_sse+70582
 4: 00007FF689DB6E4E v8::Isolate::ReportExternalAllocationLimitReached+94
 5: 00007FF689D9EF21 v8::SharedArrayBuffer::Externalize+833
 6: 00007FF689C6B18C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436
 7: 00007FF689C763C0 v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312
 8: 00007FF689C72EE4 v8::internal::Heap::PageFlagsAreConsistent+3204
 9: 00007FF689C686E3 v8::internal::Heap::CollectGarbage+1283
10: 00007FF689C66D54 v8::internal::Heap::AddRetainedMap+2452
11: 00007FF689C8809D v8::internal::Factory::NewFillerObject+61
12: 00007FF6899EE06F v8::internal::interpreter::JumpTableTargetOffsets::iterator::operator=+1295
13: 00007FF68A20B3BD v8::internal::SetupIsolateDelegate::SetupHeap+546637
14: 0000014BCF9DB744
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! myplotlysite@0.1.0 start: `react-scripts start`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the myplotlysite@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

以上是我收到的错误。我遵循了一个非常标准的设置，与本网站上列出的设置相同：https://github.com/plotly/react-plotly.js/blob/master/README.md

我创建了一个反应应用程序。当我创建一个反应应用程序并“npm start”本地主机时，它工作得非常好。执行下一步时出现此错误：

“npm install react-plotly.js plotly.js”在我这样做之后，本地主机不再工作，我得到这个错误。

我该如何解决这个问题？

对了，我很好奇，为什么这个错误这么多年还存在？ plotly 不适合 react 什么的？

Answer 1

在 repo 问题跟踪中报告了一些关于这个确切问题的问题，例如：

1. JavaScript heap out of memory error with the quickstart Plot example。
2. Javascript runs out of memory when making production build

在这些问题中，我们清楚地看到这是 NodeJS

尝试将您的 NodeJS 版本升级到最新的 12.x 版本

Node >= 12 会自动增加堆大小并且它会起作用。我建议您安装Node Version Manager (nvm) for Windows，它可以让您快速轻松地安装和切换多个节点版本。

手动增加max_old_space_size 到 React 脚本

使用max_old_space_size 增加堆大小，方法是将此选项与内存大小一起添加到package.json 脚本中：

"scripts": {
  ...
  "start": "react-scripts --max_old_space_size=4096 start",
  "build": "react-scripts --max_old_space_size=4096 build",
  ...
}

使用Partial bundles

部分捆绑

从v1.15.0 开始，plotly.js 还附带了几个部分捆绑包：

• basic
• cartesian
• geo
• ...

从v1.39.0开始，每个plotly.js部分包都有一个对应的npm包，没有依赖。

从v1.50.0 开始，每个部分捆绑包的缩小版本也会在单独的“dist min”包中发布到 npm。

plotly.js 基础

基本的部分包包含跟踪模块 scatter、bar 和 pie。

您可以从 plotly.js-basic-dist 加载已编译的库，并且在捆绑时会消耗更少的内存：

import React from "react";
// import Plot from "react-plotly.js";
import Plotly from "plotly.js-basic-dist";

import createPlotlyComponent from "react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);