reactjs - 我的 React 应用在本地主机上运行非常慢，但在实时服务器上运行正常。UI 渲染非常慢。可能的原因是什么？
我正在开发一个 React-TS 应用。在实时服务器上加载正常。但在本地主机的开发模式下非常慢。经过一些研究，我没有找到解决方案。这是我的 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 和组件渲染上。任何帮助和指导都将不胜感激。如果你需要查看其他相关代码以找出根本原因，请告诉我。
答案＃1
请使用 react.Memo。你正在使用 eslint。我想，也许 eslint 是导致你的应用变慢的原因。移除 eslint 然后再试一次。以下内容。
答案＃2
我试了这个，对我有效！
如果你使用 Chrome，只需进入开发者工具并选择不限制网络速度