排查create-react-app的项目build越来越慢的因素最近项目npm run build的速度越来越慢，开始

最近项目npm run build的速度越来越慢，开始找寻解决方式。

node包有646.8 MB大小。

package.json如下

{
  "name": "www",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^4.1.0",
    "braft-editor": "^2.3.9",
    "connected-react-router": "^6.5.2",
    "echarts": "^4.7.0",
    "history": "^4.10.1",
    "lodash": "^4.17.15",
    "moment": "^2.26.0",
    "prop-types": "^15.7.2",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-redux": "^7.1.1",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "react-transition-group": "^4.3.0",
    "react-virtualized": "^9.21.2",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0",
    "rsuite": "^3.8.13",
    "video-react": "^0.14.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts --max_old_space_size=4096 build",
    "test": "react-scripts test",
    "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": {
    "babel-plugin-react-transform": "^3.0.0",
    "eslint-plugin-react-hooks": "^2.1.2",
    "node-sass": "^4.13.1",
    "react-catch-errors": "^1.1.2",
    "react-sortablejs": "^2.0.11",
    "sass-loader": "^8.0.0"
  }
}

大体看下来也没多少内容。

新建了demo,copy一样的package.json，build速度是快速的，前提是没有多好打包的js或者css,所以需要查看一下项目里打包的css和js。

线上的有超过10个文件。复制的src的内容到新的demo中，build,需要等很久。看来是引入有些问题。

排查一：

import Tagmanage from 'components/Tagmanage'和const Tagmanage = lazy(() => import('components/Tagmanage'))引入的文件是否有关，结果，打包的速度都是01:37,所以和引入路径无关。

排查二：

redux,无效

排查三：

优化点，扩展 Create React App 的 Webpack 配置,关闭source-map:

**source-map作用：**当文件中有错误时，且使用的模式是production，打包后的文件是压缩的形式，不好定位找到错误的位置。而source-map就是一个映射文件，点进去看到的错误是源码，而不是压缩后的格式，方便调试。

目前项目，设置config.devtool = false;,打包时间04:33.86;

设置config.devtool = source-map;,打包时间06:54.96;

2020.08.17build时间

"build:tests": "react-scripts build", :npm run build:tests :01:59
"build:tests": "react-app-rewired build", :npm run build:tests :01:30
"build:tests": "react-app-rewired --max_old_space_size=4096 build",:npm run build:tests :01:30

结论

项目开发内容越多，会导致build越来越慢，关闭mapSource, 进一步优化吧～

参考文档：