Set limit perfomance CPU using npm run build of create-react-app (Docker)

Question

I ran into a performance issue while scraping a project. I am trying to build an application with the command npm run build in my application built with create-react-app --template typescript and my CPU> = 100% load.

I've already tried setting options for node:

npm run build --node-flags --max-old-space-size = 4096

react-scripts build --max-old-space-size = 4096

But this did not in any way affect the setting of the processor load limits (although I change the RAM), I just probably did not find the node --v8-options parameter or I am doing something wrong.

The globular problem is that when deploying through Docker, this is all set and collected, almost all resources are taken from the virtualization container.

I was offered the option to set build limits (I'm only a front-end developer, I don't know such details yet)

Just in case, my package.json:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/pickers": "^4.0.0-alpha.12",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "@types/react-redux": "^7.1.9",
    "@types/react-router-dom": "^5.1.6",
    "@types/redux": "^3.6.0",
    "axios": "^0.21.0",
    "date-fns": "^2.0.0-beta.5",
    "materialui-daterange-picker": "^1.1.92",
    "node-sass": "^4.14.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "redux": "^4.0.5",
    "reselect": "^4.0.0",
    "typescript": "^4.0.3",
    "uuid": "^8.3.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "env-cmd -f .env react-scripts start",
    "build": "env-cmd -f .env node_modules/react-scripts/bin/react-scripts.js 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": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/uuid": "^8.3.0",
    "env-cmd": "^10.1.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "redux-devtools": "^3.7.0",
    "redux-devtools-dock-monitor": "^1.2.0",
    "redux-devtools-log-monitor": "^2.1.0"
  }
}

OS Linux Ubuntu 20.04 (Nginx) CPU: Intel Core I5 8th RAM: 8GB DDR3

Docker:

FROM nginx:1.18.0-alpine
EXPOSE 80
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d

RUN apk add --update nodejs nodejs-npm bash
COPY package.json /app/package.json
COPY package-lock.json /app/package-lock.json
COPY src /app/src
COPY public /app/public
COPY tsconfig.json /app/tsconfig.json
RUN cd app && npm ci

ENV server_host=- \
    server_port=-

ENTRYPOINT bash -c 'printf "REACT_APP_BACKEND=http://${server_host}:${server_port}" > /app/.env; \
                    cd app;\
                    npm run build;\
                    cp -a build/. /usr/share/nginx/html;\
                    nginx -g "daemon off;"'

The app works fine. The problem is the load on the processor. Several processes are created at 200% load. How can you fix it? (even if the application takes longer to assemble, the main thing is that it does not consume processor resources by more than 50%)

Thanks for any feedback and any help

Set limit perfomance CPU using npm run build of create-react-app (Docker)

0 Answers