在DigitalOcean部署Ant Design Pro时出现JavaScript堆内存溢出如何解决

1. 临时调整Node.js堆内存限制 #

构建前先执行命令指定内存上限，可根据你的Droplet实际配置调整数值，不要超过服务器可用内存即可，示例为分配4G内存：

export NODE_OPTIONS="--max-old-space-size=4096"

Windows环境执行命令：

set NODE_OPTIONS=--max-old-space-size=4096

配置完成后再正常执行构建命令npm run build即可。

2. 永久修改构建脚本 #

直接修改项目package.json中的build命令，把内存参数嵌入脚本，后续每次构建自动生效：

{
  "scripts": {
    "build": "NODE_OPTIONS=--max-old-space-size=4096 umi build"
  }
}

3. 低配Droplet额外适配方案 #

如果你使用的是1G内存的入门款Droplet，上述方案仍报错的话，先添加交换分区扩容：

• 创建2G大小的交换文件

sudo fallocate -l 2G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

• 设置交换分区开机自动挂载

echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab

配置完成后再执行构建操作即可。

4. 本地构建替代方案 #

如果服务器配置过低无法完成构建，可以直接在本地电脑执行构建命令，把生成的dist文件夹上传到服务器，再配置Nginx指向dist目录即可，完全避开服务器端构建的内存消耗问题。

注意：max-old-space-size的数值不要超过服务器实际可用内存的80%，避免服务器负载过高卡死。

内容的提问来源于stack exchange，提问作者Tanjin Alam