在高端机器上创建反应应用程序生产构建非常慢

Question

我们在生产构建的性能方面遇到了问题。构建大约需要 20 分钟。我们认为这可能是我们的机器，所以我们在具有 32 核和 128gb 内存的服务器上运行它。

构建仍然需要大约 20 分钟，CPU 使用率仅达到 20% 的峰值，内存达到 2GB 左右的峰值。

我已经包含了我们的 package.json 文件的副本以供参考；

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@syncfusion/ej2-react-buttons": "^17.4.51",
    "@syncfusion/ej2-react-calendars": "^17.4.51",
    "@syncfusion/ej2-react-charts": "^17.4.51",
    "@syncfusion/ej2-react-circulargauge": "^17.4.51",
    "@syncfusion/ej2-react-dropdowns": "^17.4.51",
    "@syncfusion/ej2-react-grids": "^17.4.55",
    "@syncfusion/ej2-react-inputs": "^17.4.55",
    "@syncfusion/ej2-react-navigations": "^18.1.52",
    "@syncfusion/ej2-react-pdfviewer": "^18.1.52",
    "@syncfusion/ej2-react-pivotview": "^18.1.52",
    "@syncfusion/ej2-react-popups": "^17.4.51",
    "@syncfusion/ej2-react-schedule": "^17.4.55",
    "@syncfusion/ej2-react-splitbuttons": "^17.4.55",
    "@types/react-mic": "^12.4.2",
    "axios": "^0.19.2",
    "bulma": "^0.8.2",
    "bulma-extensions": "^6.2.7",
    "cb-react-forms": "^1.1.0",
    "clientjs": "^0.1.11",
    "globalize": "^1.5.0",
    "js-cookie": "^2.2.1",
    "moment": "^2.26.0",
    "prettier": "^2.0.5",
    "react": "^16.13.1",
    "react-beforeunload": "^2.2.1",
    "react-data-table-component": "^3.10.3",
    "react-device-detect": "^1.12.1",
    "react-dom": "^16.13.1",
    "react-mic": "^12.4.6",
    "react-quiz-component": "^0.3.4",
    "react-router-dom": "^5.2.0",
    "sanitize-html": "^1.24.0",
    "videojs": "^1.0.0"
  },
  "scripts": {
    "dev": "cross-env  NODE_OPTIONS=--max_old_space_size=12192 react-scripts start",
    "build": "cross-env  NODE_OPTIONS=--max_old_space_size=12192  react-scripts build",
    "test": "cross-env CI=true react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.13.0",
    "@testing-library/react": "^8.0.4",
    "@types/ej.web.all": "^18.1.2",
    "@types/globalize": "^0.0.34",
    "@types/jest": "24.0.13",
    "@types/js-cookie": "^2.2.6",
    "@types/jsonwebtoken": "^8.5.0",
    "@types/node": "12.0.7",
    "@types/react": "16.8.19",
    "@types/react-big-calendar": "^0.22.4",
    "@types/react-dom": "16.8.4",
    "@types/react-pdf": "^4.0.5",
    "@types/react-router-dom": "^5.1.5",
    "@types/styled-components": "^4.4.3",
    "@types/styled-system": "^4.2.1",
    "cross-env": "^5.2.0",
    "gulp": "^4.0.2",
    "gzipper": "^3.7.0",
    "husky": "^3.1.0",
    "mockdate": "^2.0.5",
    "prettier": "^2.0.5",
    "react-app-rewired": "^2.1.6",
    "react-scripts": "^3.4.1",
    "react-testing-library": "^8.0.1",
    "styled-components": "^4.4.1",
    "styled-system": "^5.1.5",
    "typesafe-actions": "^4.4.2",
    "typescript": "^3.9.3",
    "yarn": "^1.22.4"
  },
  "husky": {
    "hooks": {
      "pre-push": "yarn test"
    }
  }
}

运行 dev/start 时，大约需要一分钟。关于如何改善构建时间的任何建议？

Answer 1

实现更快构建时间的另一种方法是在 ReactJS 中使用可重用组件。

可重复使用组件概述

虽然之前在 NodeJS 和 React 中开发 WebRTC 应用程序，但在前端实现这一点比以前大大减少了构建时间，通常需要提前 5 分钟。

这是因为该index.html文件尝试在构建期间将 React 中的所有内容合并到单个文件中，虽然最初不是影响应用程序的问题，但在更高阶段很快就会变成更大的问题。

这是关于相同内容的简短指南：

可重复使用组件指南

由于原始问题中没有提到代码，这就是我目前能想到的全部。