ReactJS项目yarn build时CPU与内存占用过高问题求助

问题背景 #

我有一台配备2 vCPU、1GB内存的云服务器，执行yarn build构建ReactJS项目时，出现CPU负载过高、内存占用100%的情况，进程直接卡住。已经尝试用nvm切换不同Node.js版本，问题依然存在。

htop截图 #

项目package.json内容 #

{
  "name": "myproject",
  "author": "st",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "lint": "eslint --ext .ts,.tsx .",
    "lint:fix": "eslint --fix --ext .ts,.tsx .",
    "prettier": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'",
    "clear-all": "rm -rf build node_modules",
    "re-start": "rm -rf build node_modules && yarn install && yarn start",
    "re-build": "rm -rf build node_modules && yarn install && yarn build"
  },
  "eslintConfig": {
    "extends": [
      "react-app"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "@emotion/cache": "^11.10.5",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@fullcalendar/common": "^5.11.4",
    "@fullcalendar/core": "^6.1.4",
    "@fullcalendar/daygrid": "^6.1.4",
    "@fullcalendar/interaction": "^6.1.4",
    "@fullcalendar/list": "^6.1.4",
    "@fullcalendar/react": "^6.1.4",
    "@fullcalendar/timegrid": "^6.1.4",
    "@fullcalendar/timeline": "^6.1.4",
    "@hello-pangea/dnd": "^16.2.0",
    "@hookform/resolvers": "^2.9.11",
    "@iconify/react": "^4.1.0",
    "@mui/lab": "^5.0.0-alpha.127",
    "@mui/material": "^5.12.1",
    "@mui/system": "^5.12.1",
    "@mui/x-data-grid": "^6.2.1",
    "@mui/x-date-pickers": "^6.2.1",
    "@mui/x-date-pickers-pro": "^6.2.1",
    "autosuggest-highlight": "^3.3.4",
    "axios": "^1.3.3",
    "change-case": "^4.1.2",
    "date-fns": "^2.29.3",
    "framer-motion": "^9.0.4",
    "highlight.js": "^11.7.0",
    "i18next": "^22.4.10",
    "i18next-browser-languagedetector": "^7.0.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.43",
    "notistack": "^2.0.8",
    "nprogress": "^0.2.0",
    "numeral": "^2.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet-async": "^1.3.0",
    "react-hook-form": "^7.43.1",
    "react-i18next": "^12.1.5",
    "react-lazy-load-image-component": "^1.5.6",
    "react-quill": "^2.0.0",
    "react-router": "^6.8.1",
    "react-router-dom": "^6.8.1",
    "react-scripts": "^5.0.0",
    "rxjs": "^7.8.1",
    "simplebar-react": "^3.2.1",
    "stylis": "^4.1.3",
    "stylis-plugin-rtl": "^2.1.1",
    "web-vitals": "^3.1.1",
    "worker-loader": "^3.0.8",
    "yet-another-react-lightbox": "^2.4.2",
    "yup": "^1.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.22.5",
    "@babel/plugin-syntax-flow": "^7.22.5",
    "@babel/plugin-transform-react-jsx": "^7.22.5",
    "@babel/plugin-proposal-private-property-in-object": "7.21.11",
    "@types/autosuggest-highlight": "^3.2.0",
    "@types/lodash": "^4.14.195",
    "@types/node": "^20.3.1",
    "@types/nprogress": "^0.2.0",
    "@types/numeral": "^2.0.2",
    "@types/react": "^18.2.12",
    "@types/react-dom": "^18.2.5",
    "@types/react-lazy-load-image-component": "^1.5.3",
    "@types/react-slick": "^0.23.10",
    "@types/stylis": "^4.2.0",
    "@typescript-eslint/eslint-plugin": "^5.59.11",
    "@typescript-eslint/parser": "^5.59.11",
    "csstype": "^3.1.2",
    "eslint": "^8.43.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-import-resolver-typescript": "^3.5.5",
    "eslint-plugin-flowtype": "^8.0.3",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-unused-imports": "^2.0.0",
    "prettier": "^2.8.8",
    "typescript": "^4.9.5"
  },
  "overrides": {
    "nth-check": "2.1.1"
  }
}

解决方案 #

1. 调整Node.js内存限制 #

React-scripts默认内存分配不足以支撑项目构建，通过环境变量提升Node内存上限（1GB内存服务器建议设置为768或1024，避免超出系统资源）：

NODE_OPTIONS="--max-old-space-size=768" yarn build

2. 跳过构建时的ESLint检查 #

项目依赖大量ESLint插件，构建时自动lint会额外占用CPU和内存。修改package.json的build脚本：

"build": "DISABLE_ESLINT_PLUGIN=true react-scripts build"

建议在本地完成lint检查，服务器仅执行构建步骤。

3. 创建临时SWAP分区缓解内存不足 #

1GB内存偏小，临时用磁盘空间补充内存：

# 创建4GB SWAP文件
sudo fallocate -l 4G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile

构建完成后可关闭并删除SWAP：

sudo swapoff /swapfile
sudo rm /swapfile

4. 优化构建配置 #

• 升级react-scripts到最新稳定版，新版本有更好的资源优化：

  yarn upgrade react-scripts@latest
  

• 若不想升级，可执行yarn eject后修改Webpack配置：开启代码分割、禁用不必要的插件、设置parallel: false减少并发编译资源占用。

5. 本地构建后上传产物 #

如果服务器资源无法支撑构建，直接在本地完成yarn build，将生成的build目录上传到服务器即可。

内容的提问来源于stack exchange，提问作者Sinh Phan