创建优化的构建会冻结并且永远不会完成

Question

我正在尝试构建我的 React 应用程序。但是当我运行“npm run build”时，终端冻结在“创建和优化生产构建...”上并且永远不会完成。 这是我的 JSON 文件。我也尝试过 16 GB 内存。

我已经删除了包锁定文件并重建了依赖项。但它仍然是一样的。 没有任何具体的解决方案，如果有人有解决方案请告诉我。

{
  "name": "demoapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@material-ui/core": "^4.12.2",
    "@material-ui/data-grid": "^4.0.0-alpha.33",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@mui/material": "^5.0.3",
    "@progress/kendo-drawing": "^1.16.0",
    "@progress/kendo-licensing": "^1.2.1",
    "@progress/kendo-react-pdf": "^4.12.0",
    "@progress/kendo-theme-material": "^4.43.0",
    "@progress/kendo-ui": "^2021.3.1109",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "bootstrap": "^5.0.2",
    "chart.js": "^3.5.0",
    "dom-to-pdf": "^0.2.2",
    "draft-js": "^0.11.7",
    "draftjs-to-html": "^0.9.1",
    "html-to-draftjs": "^1.5.0",
    "pdf-viewer-reactjs": "^2.2.3",
    "react": "^17.0.2",
    "react-app-polyfill": "^2.0.0",
    "react-chartjs-2": "^3.0.4",
    "react-csv": "^2.0.3",
    "react-dom": "^17.0.2",
    "react-draft-wysiwyg": "^1.14.7",
    "react-hook-form": "^7.10.1",
    "react-icons": "^4.2.0",
    "react-loader": "^2.4.7",
    "react-loader-spinner": "^4.0.0",
    "react-modal-video": "^1.2.8",
    "react-redux": "^7.2.4",
    "react-responsive-carousel": "^3.2.21",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-table": "^7.7.0",
    "reactstrap": "^8.9.0",
    "redux": "^4.1.0",
    "redux-thunk": "^2.3.0",
    "sweetalert2": "^11.0.18",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "ie 11",
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

检查您是否有在另一个终端中运行的本地服务器（例如 localhost:3000 ）。

如果这样做，请通过终止批处理作业（使用 Ctrl+C）来结束该服务器实例，然后尝试再次运行

npm run build

。

Answer 2

我最近遇到了这个问题。检查您的

package.json

是否有反应脚本，如果版本是 <5.0.0 upgrade it to at least

"react-scripts": "5.0.0"

。

再次执行

yarn install

或

npm install

，然后视情况执行

yarn build

或

npm run build

。

让我知道这是否适合您！干杯！

Answer 3

如果进程卡住，可能是由于计算资源不足。

我建议调查当前正在运行的进程。

尝试在不同的终端窗口上运行

sudo htop

，然后运行

sudo npm run build

。

您可能会发现另一个进程占用了太多内存，导致构建过程挂起。

您可能需要终止或重新启动此类进程才能完成构建。 最好检查一下为什么这些进程占用这么多内存，但这不是主题。

Answer 4

我也遇到过这个问题。找了很多解决办法，最后发现是我服务器内存不足造成的。 由于内存不足，服务器在打包时卡住了。请检查您的服务器内存使用是否正常。如果您遇到类似问题，建议先停止其他服务，然后再进行打包

Answer 5

我正在使用 ec2，这是由于服务器上的 RAM 较低而发生的。要解决此问题，您可以创建一个交换区域，操作系统可以将其用作临时空间来存储 RAM 中无法再保存的数据。 以下是在基于 Unix 的系统上创建交换文件的步骤：

创建交换文件： sudo fallocate -l 4G /交换文件

保护交换文件： 须藤 chmod 600 /交换文件

设置交换空间： 须藤 mkswap /交换文件

启用交换文件： 须藤交换/交换文件

验证交换空间： sudo swapon --show

上面的命令将产生类似这样的输出： 名称 类型 尺寸 使用优先级 /交换文件文件 4G 0B -2

然后运行： 导出 NODE_OPTIONS=--max_old_space_size=4096 && npm run build

这有助于解决问题。更多关于交换区的内容请阅读这里