React编译@emurgo/cardano-serialization-lib-asmjs时堆内存溢出问题

问题说明 #

在React项目中使用@emurgo/cardano-serialization-lib-asmjs（版本^10.0.0，也尝试过9.x版本），导入方式为：

import { Value } from '@emurgo/cardano-serialization-lib-asmjs'

执行npm start时触发JavaScript堆内存溢出错误，核心报错信息：

<--- Last few GCs --->

[17762:0x128008000]    27872 ms: Scavenge 2042.7 (2086.0) -> 2041.8 (2090.0) MB, 3.3 / 0.0 ms  (average mu = 0.232, current mu = 0.011) allocation failure 
[17762:0x128008000]    29876 ms: Mark-sweep (reduce) 2044.7 (2090.0) -> 2043.7 (2085.7) MB, 1301.1 / 0.1 ms  (+ 183.0 ms in 45 steps since start of marking, biggest step 9.8 ms, walltime since start of marking 1515 ms) (average mu = 0.247, current mu = 0.

<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0x1010582dc node::Abort() [/Users/hamzaaamir/.nvm/versions/node/v16.15.1/bin/node]
 2: 0x101058464 node::errors::TryCatchScope::~TryCatchScope() [/Users/hamzaaamir/.nvm/versions/node/v16.15.1/bin/node]
 3: 0x1011a7b90 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/hamzaaamir/.nvm/versions/node/v16.15.1/bin/node]
 4: 0x1011a7b24 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/hamzaaamir/.nvm/versions/node/v16.15.1/bin/node]
 5: 0x10132b23c v8::internal::Heap::GarbageCollectionReasonToString(v8::internal::GarbageCollectionReason) [/Users/hamzaaamir/.nvm/versions/node/v16.15.1/bin/node]
 6: 0x101329d5c v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/hamzaaamir/.nvm/versions/node/v16.15.1/bin/node]

解决方案 #

1. 临时提升Node.js堆内存限制 #

修改项目package.json中的start脚本，增加堆内存参数：

"scripts": {
  "start": "node --max-old-space-size=4096 node_modules/react-scripts/scripts/start.js"
}

参数4096表示分配4GB内存，可根据机器配置调整（如8192表示8GB），重新执行npm start即可。

2. 替换为Wasm版本（推荐） #

asmjs版本体积大、编译内存占用高，官方推荐使用WebAssembly版本替代：

• 安装Wasm版本依赖：

npm install @emurgo/cardano-serialization-lib-browser

• 修改导入语句：

import { Value } from '@emurgo/cardano-serialization-lib-browser'

Wasm版本编译效率更高，内存占用远低于asmjs版本，能从根源解决溢出问题。

3. 优化Webpack编译配置（自定义场景） #

若项目使用create-react-app并通过craco/react-app-rewired自定义配置，可将该库设为外部依赖，避免打包时占用内存：

• 安装craco（若未安装）：

npm install @craco/craco --save-dev

• 创建craco.config.js：

module.exports = {
  webpack: {
    externals: {
      '@emurgo/cardano-serialization-lib-asmjs': 'CardanoSerializationLib'
    }
  }
}

• 修改package.json脚本使用craco启动：

"scripts": {
  "start": "craco start"
}

• 在public/index.html中引入CDN资源：

<script src="https://unpkg.com/@emurgo/cardano-serialization-lib-asmjs@10.0.0/cardano_serialization_lib.js"></script>

内容的提问来源于stack exchange，提问作者Hamza Awan