Gatsby项目JavaScript堆内存不足：本地已解决，Gatsby Cloud免费版仍报错

问题背景 #

本地开发时通过设置export NODE_OPTIONS="--max-old-space-size=8192"解决了JavaScript堆内存溢出问题，但使用Gatsby Cloud免费账户构建时依然触发以下错误：

[BABEL] Note: The code generator has deoptimised the styling of  C:\projectFolderName\website\.cache\_this_is_virtual_fs_path_\$virtual\async-requires.js as it exceeds the max of 500KB.

⠇ Building development bundle
[=========================== ]   6.726 s 93/94 99% Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs

<--- Last few GCs --->

[9976:000001988CB9E980]    95944 ms: Mark-sweep (reduce) 3788.6 (4135.7) -> 3788.1 (4126.0) MB, 406.0 / 0.0 ms  (average mu = 0.200, current mu = 0.099) allocation failure; GC in old space requested[9976:000001988CB9E980]    96920 ms: Mark-sweep (reduce) 3804.8 (4142.6) -> 3804.7 (4130.4) MB, 934.4 / 0.0 ms  (average mu = 0.099, current mu = 0.042) allocation failure; GC in old space requested

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF772162BCF node_api_throw_syntax_error+175519
 2: 00007FF7720E83A6 SSL_get_quiet_shutdown+64006
 3: 00007FF7720E9762 SSL_get_quiet_shutdown+69058
 4: 00007FF772B8FDD4 v8::Isolate::ReportExternalAllocationLimitReached+116
 5: 00007FF772B7B132 v8::Isolate::Exit+674
 6: 00007FF7729FCF8C v8::internal::EmbedderStackStateScope::ExplicitScopeForTesting+124
 7: 00007FF772A0A26D v8::internal::Heap::PublishPendingAllocations+1117
 8: 00007FF772A072F7 v8::internal::Heap::PageFlagsAreConsistent+3367
 9: 00007FF7729F9A27 v8::internal::Heap::CollectGarbage+2039
10: 00007FF772A103E3 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath+2099
11: 00007FF772A10C8D v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath+93
12: 00007FF772A195DA v8::internal::Factory::AllocateRaw+810
13: 00007FF772A2CA1D v8::internal::FactoryBase<v8::internal::Factory>::NewHeapNumber<0>+685
14: 00007FF772A30EC8 v8::internal::FactoryBase<v8::internal::Factory>::NewRawTwoByteString+72
15: 00007FF7727D8924 v8::internal::String::SlowFlatten+724
16: 00007FF772B999ED v8::String::Utf8Length+141
17: 00007FF77210E521 v8::internal::Malloced::operator delete+18209
18: 00007FF772B4895D v8::internal::Builtins::code+248237
19: 00007FF772B48569 v8::internal::Builtins::code+247225
20: 00007FF772B4882C v8::internal::Builtins::code+247932
21: 00007FF772B48690 v8::internal::Builtins::code+247520
22: 00007FF772C2D471 v8::internal::SetupIsolateDelegate::SetupHeap+558449
23: 00007FF6F3F5AF91

解决方案 #

1. 在Gatsby Cloud中配置NODE_OPTIONS环境变量 #

进入Gatsby Cloud项目的Site Settings > Environment Variables，添加变量：

• 变量名：NODE_OPTIONS
• 变量值：--max-old-space-size=6144（免费版内存配额有限，8192可能超出上限，先以6144测试）

2. 优化MDX文件处理 #

• 启用gatsby-plugin-mdx代码分割：在gatsby-config.js的MDX插件配置中添加options: { codeSplitting: true }
• 排除冗余文件：在gatsby-source-filesystem配置里通过ignore字段排除测试、草稿类MDX文件，减少构建时的加载量

3. 优化图片处理流程 #

• 降低图片处理并发数：修改gatsby-plugin-sharp配置，添加options: { concurrency: 4 }，减少同时处理的图片数量以降低内存占用
• 替换为新版图片组件：改用gatsby-plugin-image替代旧版图片组件，自动优化图片加载逻辑

4. 减小bundle体积 #

• 清理冗余依赖：检查项目中未使用的插件、组件和资源，减少async-requires.js的生成体积
• 确保生产模式构建：确认Gatsby Cloud使用gatsby build命令构建生产版本，自动触发代码压缩和优化

5. 清理Gatsby Cloud缓存 #

进入项目Builds页面，点击Clear Cache后重新触发构建，避免旧缓存占用额外内存

内容的提问来源于stack exchange，提问作者Guru Pawar