reactjs - برنامه React من در LocalHost بسیار کند کار میکند اما در سرور زنده به خوبی کار میکند. رندر رابط کاربری بسیار کند است. علت ممکن چیست؟

من روی یک برنامه React-TS کار میکنم. در سرور زنده به خوبی بارگذاری میشود. اما در حالت توسعه در localhost بسیار کند است. بعد از انجام برخی تحقیقات، هیچ راه حلی پیدا نکردم. این فایل package.json من است.

{
  "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"
  }
}

من تلاش کردم تا وابستگیهای مربوط به es-lint و lint و ابزارهای توسعه/redux را حذف کنم، اما مشکل هنوز وجود دارد. API درست کار میکند و پاسخها را به موقع دریافت میکنم. فکر میکنم مشکلی در UI و رندر کردن کامپوننتها وجود داشته باشد. هرگونه کمک و راهنمایی بسیار قدردانی خواهد شد. لطفاً اطلاع دهید اگر نیاز دارید سایر کدهای مرتبط را ببینید تا به علت اصلی برسیم.

پاسخ شماره ۱

لطفاً از react.Memo استفاده کنید. شما از eslint استفاده میکنید. فکر میکنم، شاید eslint دلیلی باشد که برنامه شما را کند میکند. eslint را حذف کنید و سپس دوباره امتحان کنید. در ادامه.

پاسخ شماره ۲

من این را امتحان کردم و برای من جواب داد!

اگر از کروم استفاده میکنید، به ابزارهای توسعه بروید و گزینه بدون محدودیت را انتخاب کنید