如何优化 npm start 的过程,使其在给定的依赖项下尽可能快?

问题描述

大约需要 44 秒,Starting the development server... 消息才会消失,显示我的 TS 文件中的警告。

我不喜欢热重载,因为对于一个大项目,它有时会把事情搞砸。

我可以做些什么来优化这个过程,使其花费尽可能少的秒而不是 44 秒?

我会尝试删除尽可能多的 deps,但在我尝试之前我不确定这会如何工作,这意味着代码中有很多更改。

也许一些更一般的建议对我有帮助,我希望如此。

给定文件扩展名的文件计数:

./src/ $ find -type f -name "*.js" -printf x | wc -c
149
./src/ $ find -type f -name "*.jsx" -printf x | wc -c
0
./src/ $ find -type f -name "*.ts" -printf x | wc -c
14
./src/ $ find -type f -name "*.tsx" -printf x | wc -c
201

总计:364 个 TS 或 JS 文件

它主要是一个 React 应用程序,带有一些老式的 DOM 使用 JS 代码

package.json 文件是这样的:

{
  "name": "some-dummy-placeholder","version": "0.1.0","private": true,"dependencies": {
    "@date-io/core": "^1.3.13","@date-io/date-fns": "^1.3.13","@formatjs/intl-pluralrules": "1.3.5","@fortawesome/fontawesome-free": "5.13.0","@hookform/resolvers": "^2.5.1","@loadable/component": "^5.15.0","@manaflair/redux-batch": "1.0.0","@material-ui/core": "^4.11.4","@material-ui/data-grid": "^4.0.0-alpha.30","@material-ui/icons": "4.9.1","@material-ui/lab": "4.0.0-alpha.53","@material-ui/pickers": "^3.3.10","@reduxjs/toolkit": "1.3.6","@tanem/svg-injector": "8.0.50","@testing-library/jest-dom": "^5.11.4","@testing-library/react": "^11.2.7","@testing-library/user-event": "^12.1.10","@types/jest": "^26.0.15","@types/node": "^12.20.13","@types/react": "^17.0.8","@types/react-dom": "^17.0.5","@types/yup": "^0.29.11","apexcharts": "3.19.2","axios": "0.19.2","axios-mock-adapter": "1.18.1","bootstrap": "4.6.0","classnames": "^2.3.1","clipboard-copy": "3.1.0","clsx": "1.1.0","cp-cli": "2.0.0","css-mediaquery": "0.1.2","date-fns": "2.8.1","downshift": "3.4.2","faker": "^5.5.3","fg-loadcss": "2.1.0","formik": "^2.2.8","gravatar": "^1.8.1","json2mq": "0.2.0","jss-rtl": "^0.3.0","lodash": "^4.17.21","material-ui-popup-state": "1.4.1","node-sass": "^4.0.0","object-path": "0.11.4","perfect-scrollbar": "1.5.0","prop-types": "15.7.2","react": "16.14.0","react-bootstrap": "1.0.1","react-bootstrap-table-next": "4.0.2","react-bootstrap-table2-paginator": "2.1.2","react-clock": "^3.0.0","react-datepicker": "2.16.0","react-dom": "16.12.0","react-draggable": "4.4.2","react-dropzone-uploader": "^2.11.0","react-hook-form": "^7.6.10","react-inlinesvg": "1.2.0","react-intl": "3.6.2","react-is": "16.13.1","react-numeric-input": "^2.2.3","react-perfect-scrollbar": "1.5.8","react-portal": "4.2.0","react-redux": "7.1.3","react-redux-idle-monitor": "^0.3.3","react-router-dom": "5.1.2","react-scripts": "^4.0.3","react-select": "3.1.0","react-select-virtualized": "^3.0.0","react-swipeable-views": "0.13.9","react-Syntax-Highlighter": "12.2.1","react-vertical-timeline-component": "^3.3.3","react-virtualized": "^9.22.3","react-window": "1.8.5","redux": "4.0.5","redux-idle-monitor": "^0.10.2","redux-persist": "6.0.0","redux-saga": "1.1.3","socicon": "3.0.5","styled-components": "^5.3.0","tiny-slider-react": "^0.5.3","typescript": "^4.3.2","web-vitals": "^1.0.1","yup": "^0.32.9"
  },"scripts": {
    "start": "broWSER=chromium react-app-rewired start -o","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-scripts eject","lint": "eslint src","format": "prettier --write \"src/**/*.{js,css,scss,html}\"","rtl": "webpack"
  },"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"
    ]
  },"devDependencies": {
    "@types/faker": "^5.5.5","@types/gravatar": "^1.8.1","@types/loadable__component": "^5.13.3","@types/object-path": "^0.11.0","@types/react-bootstrap-table-next": "^4.0.13","@types/react-clock": "^3.0.0","@types/react-datepicker": "^3.1.8","@types/react-is": "^17.0.0","@types/react-numeric-input": "^2.2.3","@types/react-redux": "^7.1.16","@types/react-router-dom": "^5.1.7","@types/react-select": "^4.0.15","@types/react-vertical-timeline-component": "^3.0.0","@types/styled-components": "^5.1.9","@types/tiny-slider-react": "^0.3.2","@types/uuid": "^8.3.0","copyfiles": "2.1.1","prettier": "1.19.1","react-app-rewired": "^2.1.8","sass": "1.32.8","serve": "11.2.0","tsconfig-paths-webpack-plugin": "^3.5.1","webpack": "^4.44.2","webpack-cli": "^3.3.12","webpack-messages": "2.0.4","webpack-rtl-plugin": "2.0.0"
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...