node.js - 使用 Create React App 和 Plotly.js 时出现内存不足错误
问题描述
<--- 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”在我这样做之后,本地主机不再工作,我得到这个错误。
我怎样才能解决这个问题?
对了,我很好奇,为什么这么多年还存在这个错误?情节不适用于反应或其他什么?
解决方案
在回购问题跟踪中报告了一些关于这个确切问题的问题,例如:
在这些问题中,我们清楚地看到这是 NodeJS <= 10 内存分配问题的问题,对此有几种解决方案:
尝试将您的 NodeJS 版本升级到最新的 12.x 版本
Node >= 12 会自动增加堆大小并且它会起作用。我建议您安装适用于 Windows 的 Node Version Manager (nvm),这将允许您快速轻松地安装和切换多个节点版本。
手动增加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",
...
}
使用部分捆绑包
部分捆绑
从 开始
v1.15.0
,plotly.js 还附带了几个部分捆绑包:从 开始
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);
推荐阅读
- nginx - Kubernetes 1.16.10 集群上的 Nginx 控制器升级失败
- c++ - 逐行读取文本文件并将其存储在数组中
- c# - 带有 unity.mvc 的 Identity AuthenticationManager
- google-apps-script - 当我将 GAS 项目作为附加组件进行测试时,触发器无法正常工作
- javascript - NodeJs 计划进程的最佳实践?
- reactjs - 如何从浏览器单击从 react-native-webview 访问下一个 url
- python - 如何将终端集成到使用 python-tk 创建的文本编辑器中?
- python - 如何抓取具有内部 iFrame 的 iFrame?
- sas - sas 主机数据文件名 old rec 删除
- c# - COMException 错误:80040154 类未在 microsoft.office.interop.excel.application C# 中注册