0

我的反应开发服务器太慢了,而且有很多问题。

请看我的配置。

包.json

{
  "version": "1.0.2",
  "private": true,
  "dependencies": {
    "@date-io/dayjs": "^1.3.13",
    "@date-io/moment": "^1.3.13",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@grapecity/wijmo": "^5.20203.766",
    "@grapecity/wijmo.all": "^5.20203.766",
    "@grapecity/wijmo.react.all": "^5.20203.766",
    "@material-ui/core": "^4.11.3",
    "@material-ui/data-grid": "^4.0.0-alpha.19",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@material-ui/pickers": "^3.2.10",
    "@pdftron/pdfjs-express": "^7.3.8",
    "@pdftron/webviewer": "^8.0.0",
    "@popperjs/core": "^2.6.0",
    "@progress/kendo-licensing": "1.1.4",
    "@progress/kendo-react-animation": "4.6.0",
    "@progress/kendo-react-intl": "4.6.0",
    "@progress/kendo-react-treeview": "4.6.0",
    "@progress/kendo-theme-default": "4.38.1",
    "@react-spring/web": "^9.0.0-rc.3",
    "@reduxjs/toolkit": "^1.5.0",
    "@syncfusion/ej2": "^19.2.56",
    "@syncfusion/ej2-base": "^19.2.55",
    "@syncfusion/ej2-pdfviewer": "^19.2.56",
    "@syncfusion/ej2-react-base": "^19.2.55",
    "@syncfusion/ej2-react-pdfviewer": "^19.2.56",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/jquery": "^3.5.5",
    "@types/node": "^12.0.0",
    "@types/react-date-range": "^1.1.4",
    "@types/react-dom": "17.0.1",
    "@welldone-software/why-did-you-render": "^6.0.5",
    "auth0-lock": "^11.28.0",
    "autoprefixer": "^10.2.4",
    "autosuggest-highlight": "^3.1.1",
    "axios": "^0.21.1",
    "chart.js": "^2.9.4",
    "chartjs-plugin-datalabels": "^0.7.0",
    "clsx": "^1.1.1",
    "common-module": "0.0.28",
    "common_module": "^1.0.2",
    "components": "^1.0.2",
    "cross-fetch": "^3.0.6",
    "date-fns": "^2.0.0-beta.5",
    "digital-digit": "^1.2.0",
    "firebase": "^8.2.6",
    "formsy-react": "^2.2.3",
    "fuse": "^1.0.2",
    "fuse_app": "^1.0.2",
    "google-map-react": "^2.1.9",
    "hammerjs": "^2.0.8",
    "history-module": "^1.0.2",
    "hooks": "^1.0.2",
    "hwp.js": "0.0.3",
    "hygen": "^6.0.4",
    "i18n": "^0.13.2",
    "i18next": "^19.8.7",
    "ip": "^1.1.5",
    "jquery": "^3.6.0",
    "jss": "^10.5.1",
    "jss-plugin-extend": "^10.5.1",
    "jss-rtl": "^0.3.0",
    "jwt-decode": "^3.1.2",
    "lodash-module": "^1.0.2",
    "material-ui": "^0.20.2",
    "material-ui-popup-state": "^1.7.1",
    "mobile-detect": "^1.4.4",
    "moment": "^2.29.1",
    "moment-locales-webpack-plugin": "^1.2.0",
    "moment-range": "^4.0.2",
    "moment-timezone": "^0.5.33",
    "notistack": "^1.0.3",
    "perfect-scrollbar": "^1.5.0",
    "popper.js": "^1.16.1",
    "postcss": "^8.2.5",
    "prismjs": "^1.23.0",
    "raw-loader": "^4.0.2",
    "react": "17.0.1",
    "react-autosuggest": "^10.1.0",
    "react-beautiful-dnd": "^13.0.0",
    "react-big-calendar": "^0.31.0",
    "react-chartjs-2": "^2.11.1",
    "react-circular-progressbar": "^2.0.3",
    "react-d3-speedometer": "^1.0.1",
    "react-date-range": "^1.1.3",
    "react-dom": "17.0.1",
    "react-draggable": "^4.4.3",
    "react-dropzone": "^11.3.0",
    "react-frame-component": "^4.1.3",
    "react-i18next": "^11.8.6",
    "react-masonry-css": "^1.0.14",
    "react-number-format": "^4.4.4",
    "react-pdf-highlighter": "^4.0.0",
    "react-popper": "^2.2.4",
    "react-redux": "^7.2.2",
    "react-router-config": "^5.1.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "react-select": "^4.1.0",
    "react-swipeable": "^6.0.1",
    "reactstrap": "^8.9.0",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0",
    "shortcuts": "^1.6.2",
    "styled-components": "^5.2.1",
    "tailwindcss-dir": "^4.0.0",
    "typescript": "^4.0.3",
    "use-async-effect": "^2.2.3",
    "utils_js": "^1.0.2",
    "utils_ts": "^1.0.2",
    "velocity-animate": "^1.5.2",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "npx kendo-ui-license activate && yarn run tailwind && export PORT=5502 && NODE_ENV=development DISABLE_ESLINT_PLUGIN=true GENERATE_SOURCEMAP=false react-app-rewired --max_old_space_size=8128 start"
  },
  "eslintConfig": {
    "ignorePatterns": [
      "src/*",
      "!src/test.js"
    ],
    "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": {
    "@babel/plugin-proposal-optional-chaining": "^7.12.7",
    "@date-io/date-fns": "^1.3.13",
    "@types/antd": "^1.0.0",
    "@types/i18n": "^0.12.0",
    "@types/ip": "^1.1.0",
    "@types/material-ui": "^0.21.8",
    "@types/react": "^16.14.2",
    "@types/react-dropzone": "^5.1.0",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-config": "^5.0.2",
    "@types/react-router-dom": "^5.1.7",
    "@types/redux": "^3.6.0",
    "@types/redux-persist": "^4.3.1",
    "@types/redux-thunk": "^2.1.0",
    "@types/styled-components": "^5.1.7",
    "babel-plugin-import": "^1.13.3",
    "customize-cra": "^1.0.0",
    "eslint": "^7.11.0",
    "purgecss": "1.4.2",
    "react-app-rewired": "^2.1.8",
    "react-spring": "^8.0.27",
    "react-swipeable-views": "^0.13.9",
    "react-table": "^7.6.3",
    "react-text-mask": "^5.4.3",
    "react-virtualized": "^9.22.3",
    "react-window": "^1.8.6",
    "tailwind": "^4.0.0",
    "tailwindcss": "^2.0.3",
    "velocity-react": "^1.4.3"
  },
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  }
}

覆盖.js

const { useBabelRc, override, addWebpackAlias, addWebpackPlugin } = require("customize-cra");
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');

// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const addPlugin = config =>{
    config.plugins.push(new MomentLocalesPlugin());
    return config;
}

const path = require("path");

module.exports = override(
    addPlugin,
    useBabelRc(),
    addWebpackAlias({
        ['@fuse_app'] : path.resolve(__dirname, "src/@fuse_app"),
        ['@fuse'] : path.resolve(__dirname, "src/@fuse"),
        ['@lodash'] : path.resolve(__dirname, "src/@lodash"),
        ['@history'] : path.resolve(__dirname, "src/@history"),
    }),
    
);
// addWebpackPlugin(new BundleAnalyzerPlugin()),

.babelrc

{  
    "plugins": [  
        [  
            "@babel/plugin-proposal-optional-chaining"
        ],
        ["import", { "libraryName": "antd", "libraryDirectory": "lib"}, "antd"],
        ["import", { "libraryName": "antd-mobile", "libraryDirectory": "lib"}, "antd-mobile"]
    ]
}

并且我的过程屏幕截图 在此处输入图像描述

当我运行“npm start”时,需要超过 1 分钟。当我编辑我的代码并保存时,它需要 10 多秒。我不知道为什么应用程序这么长,cpu 使用量这么大。请任何人帮助我。

  • 我的 repo 使用 lerna 运行(repo 中存在许多打字稿.. sry)

请看我的设置。谢谢你。

4

0 回答 0