Create react app production build very slow on high end machine

Question

we are having issues with the performance of production build. It takes around 20 minutes to build. We thought maybe it's our machine, so we ran it on a server with 32 core and 128gb ram.

The build still took around 20 minutes and the CPU usage only peaked to 20% and the memory peaked to around 2gb.

I have included a copy of our package.json file for reference;

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@syncfusion/ej2-react-buttons": "^17.4.51",
    "@syncfusion/ej2-react-calendars": "^17.4.51",
    "@syncfusion/ej2-react-charts": "^17.4.51",
    "@syncfusion/ej2-react-circulargauge": "^17.4.51",
    "@syncfusion/ej2-react-dropdowns": "^17.4.51",
    "@syncfusion/ej2-react-grids": "^17.4.55",
    "@syncfusion/ej2-react-inputs": "^17.4.55",
    "@syncfusion/ej2-react-navigations": "^18.1.52",
    "@syncfusion/ej2-react-pdfviewer": "^18.1.52",
    "@syncfusion/ej2-react-pivotview": "^18.1.52",
    "@syncfusion/ej2-react-popups": "^17.4.51",
    "@syncfusion/ej2-react-schedule": "^17.4.55",
    "@syncfusion/ej2-react-splitbuttons": "^17.4.55",
    "@types/react-mic": "^12.4.2",
    "axios": "^0.19.2",
    "bulma": "^0.8.2",
    "bulma-extensions": "^6.2.7",
    "cb-react-forms": "^1.1.0",
    "clientjs": "^0.1.11",
    "globalize": "^1.5.0",
    "js-cookie": "^2.2.1",
    "moment": "^2.26.0",
    "prettier": "^2.0.5",
    "react": "^16.13.1",
    "react-beforeunload": "^2.2.1",
    "react-data-table-component": "^3.10.3",
    "react-device-detect": "^1.12.1",
    "react-dom": "^16.13.1",
    "react-mic": "^12.4.6",
    "react-quiz-component": "^0.3.4",
    "react-router-dom": "^5.2.0",
    "sanitize-html": "^1.24.0",
    "videojs": "^1.0.0"
  },
  "scripts": {
    "dev": "cross-env  NODE_OPTIONS=--max_old_space_size=12192 react-scripts start",
    "build": "cross-env  NODE_OPTIONS=--max_old_space_size=12192  react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.13.0",
    "@testing-library/react": "^8.0.4",
    "@types/ej.web.all": "^18.1.2",
    "@types/globalize": "^0.0.34",
    "@types/jest": "24.0.13",
    "@types/js-cookie": "^2.2.6",
    "@types/jsonwebtoken": "^8.5.0",
    "@types/node": "12.0.7",
    "@types/react": "16.8.19",
    "@types/react-big-calendar": "^0.22.4",
    "@types/react-dom": "16.8.4",
    "@types/react-pdf": "^4.0.5",
    "@types/react-router-dom": "^5.1.5",
    "@types/styled-components": "^4.4.3",
    "@types/styled-system": "^4.2.1",
    "cross-env": "^5.2.0",
    "gulp": "^4.0.2",
    "gzipper": "^3.7.0",
    "husky": "^3.1.0",
    "mockdate": "^2.0.5",
    "prettier": "^2.0.5",
    "react-app-rewired": "^2.1.6",
    "react-scripts": "^3.4.1",
    "react-testing-library": "^8.0.1",
    "styled-components": "^4.4.1",
    "styled-system": "^5.1.5",
    "typesafe-actions": "^4.4.2",
    "typescript": "^3.9.3",
    "yarn": "^1.22.4"
  },
  "husky": {
    "hooks": {
      "pre-push": "yarn test"
    }
  }
}

When running dev/start, it takes about a minute. Any suggestions on how to improve the build times?

Answer 1

Apart from the above mentioned answer I would like to add that shifting from CRA (Create React App) to vite would significantly reduce your build time as well as your bundle size.

Create React App (CRA) was once the go-to tool for creating new React projects. It provided a simple and easy-to-use command-line interface (CLI) for setting up new React codebases, complete with a development server, automatic transpilation, and more.

Many devs currently consider CRA to be dead, and is now mostly used by people who are getting started with react.

Vite ships with a pre-configured build command that bakes in many performance optimizations out of the box. So check it out!

Here's an article on why CRA is dead and the best available alternatives: Create React App is Dead?

Happy coding!