reactjs - React-sovellukseni toimii erittäin hitaasti LocalHostissa, mutta Live Serverissä se toimii hyvin. Käyttöliittymän renderöinti on hyvin hidasta. Mikä voisi olla mahdollinen syy?

Työskentelen React-TS-sovelluksen parissa. Se latautuu hyvin live-palvelimella. Mutta kehitystilassa localhostissa se on hyvin hidas. Tutkittuani asiaa en löytänyt ratkaisua. Tässä on minun package.json-tiedostoni.

{
  "name": "xiq-webapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.7.2",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.0",
    "@types/node": "^16.11.23",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "antd": "^4.18.6",
    "apexcharts": "^3.35.0",
    "axios": "^0.26.0",
    "bootstrap-daterangepicker": "^3.1.0",
    "branch-sdk": "^2.59.0",
    "buffer": "^6.0.3",
    "classnames": "^2.3.1",
    "dotenv": "^16.0.0",
    "env-cmd": "^10.1.0",
    "eslint": "^8.9.0",
    "eslint-config-airbnb-typescript": "^16.1.0",
    "eslint-plugin-react-hooks": "^4.5.0-next-2bf5eba72-20220416",
    "formik": "^2.2.9",
    "highcharts": "^10.0.0",
    "highcharts-react-official": "^3.1.0",
    "html-react-parser": "^1.4.9",
    "js-cookie": "^3.0.1",
    "moment": "^2.29.3",
    "prop-types": "^15.8.1",
    "query-string": "^7.1.1",
    "react": "^18.0.0",
    "react-apexcharts": "^1.4.0",
    "react-bootstrap-daterangepicker": "^7.0.0",
    "react-dnd": "^16.0.0",
    "react-dnd-html5-backend": "^16.0.0",
    "react-dnd-scrolling": "^1.2.4",
    "react-dnd-touch-backend": "^16.0.0",
    "react-dom": "^18.1.0",
    "react-google-recaptcha-v3": "^1.9.7",
    "react-infinite-scroll-component": "^6.1.0",
    "react-lazy-load-image-component": "^1.5.4",
    "react-masonry-component": "^6.3.0",
    "react-onesignal": "^2.0.4",
    "react-outside-click-handler": "^1.3.0",
    "react-redux": "^7.2.6",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "react-share": "^4.4.0",
    "react-verification-code-input": "^1.2.9",
    "react-waypoint": "^10.1.0",
    "redux-injectors": "^1.3.0",
    "redux-saga": "^1.1.3",
    "slow-deps": "^1.4.0",
    "styled-components": "^5.3.3",
    "web-vitals": "^2.1.4",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "./node_modules/.bin/env-cmd -f ./environment/.env.production react-scripts start",
    "start:dev": "./node_modules/.bin/env-cmd -f ./environment/.env.development react-scripts start",
    "start:local": "cross-env ./node_modules/.bin/env-cmd -f ./environment/.env.local react-scripts start",
    "start:stag": "./node_modules/.bin/env-cmd -f ./environment/.env.staging react-scripts start",
    "start:prod": "./node_modules/.bin/env-cmd -f ./environment/.env.production npm react-scripts start",
    "start:uat": "./node_modules/.bin/env-cmd -f ./environment/.env.uat npm react-scripts start",
    "build": "./node_modules/.bin/env-cmd -f ./environment/.env.production react-scripts build",
    "build:dev": "./node_modules/.bin/env-cmd -f ./environment/.env.development react-scripts build",
    "build:local": "./node_modules/.bin/env-cmd -f ./environment/.env.local react-scripts build",
    "build:stag": "./node_modules/.bin/env-cmd -f ./environment/.env.staging react-scripts build",
    "build:prod": "./node_modules/.bin/env-cmd -f ./environment/.env.production react-scripts build",
    "build:uat": "./node_modules/.bin/env-cmd -f ./environment/.env.uat react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "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/branch-sdk": "^2.53.3",
    "@types/js-cookie": "^3.0.1",
    "@types/react-lazy-load-image-component": "^1.5.2",
    "@types/react-outside-click-handler": "^1.3.1",
    "@types/styled-components": "^5.1.22",
    "@types/webpack-env": "^1.16.3",
    "@typescript-eslint/eslint-plugin": "^5.12.0",
    "@typescript-eslint/parser": "^5.12.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.28.0",
    "typescript": "^4.5.5"
  }
}

Yritin poistaa es-lintin ja linttiin liittyvät riippuvuudet sekä kehitys-/redux-työkalut, mutta ongelma on edelleen olemassa. API toimii hyvin ja saa vastaukset ajoissa. Luulen, että ongelma liittyy UI:hin ja komponenttien renderöintiin. Kaikki apu ja ohje olisi erittäin arvostettua. Ilmoita, jos tarvitset nähdä muuta koodiin liittyvää materiaalia juurisyyn selvittämiseksi.

Vastaus #1

Ole hyvä ja käytä react.Memo. Käytät eslintiä. Luulen niin, ehkä eslint on syy, joka hidastaa sovellustasi. Poista eslint ja yritä sitten uudelleen. Seuraava.

Vastaus #2

Kokeilin tätä ja se toimi minulla!

Jos käytät Chromea, mene vain kehittäjätyökaluihin ja valitse ei rajoitusta