facebook / create-react-app

Set up a modern web app by running one command.
https://create-react-app.dev
MIT License
102.55k stars 26.8k forks source link

First start take more than one minute, and modify one file take 10s to recompile. Is this ok? #3749

Closed jaggerwang closed 6 years ago

jaggerwang commented 6 years ago

There are about 700 files in our project, not including files under node_modules directory. Is there anyway to improve the recompile performance? Because I only changed one file, so I want to see the result as soon as possible.

The following is our package.json file.

{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "format": "standard",
    "format:fix": "standard --fix"
  },
  "standard": {
    "ignore": [
      "build",
      "coverage",
      "node_modules",
      "public"
    ],
    "globals": [
      "it",
      "expect"
    ]
  },
  "proxy": {
    "/api": {
      "target": "http://gtgj.dev.bicisims.com/api/",
      "pathRewrite": {
        "^/api": ""
      },
      "changeOrigin": true
    }
  },
  "dependencies": {
    "@antv/data-set": "^0.8.3",
    "antd": "^3.1.0",
    "axios": "0.17.1",
    "bizcharts": "^3.1.0-beta.6",
    "compare-versions": "3.1.0",
    "deepcopy": "0.6.3",
    "dotenv": "4.0.0",
    "echarts": "3.8.5",
    "echarts-for-react": "2.0.3",
    "immutable": "3.8.2",
    "lodash": "4.17.4",
    "moment": "2.20.1",
    "promise.prototype.finally": "3.1.0",
    "prop-types": "15.6.0",
    "react": "15.6.2",
    "react-day-picker": "7.0.5",
    "react-dom": "15.6.2",
    "react-modal": "3.1.10",
    "react-motion": "0.5.2",
    "react-redux": "5.0.6",
    "react-router": "2.8.1",
    "react-router-dom": "4.2.2",
    "react-select": "1.1.0",
    "redial": "0.5.0",
    "redux": "3.7.2",
    "redux-form": "7.2.0",
    "redux-logger": "3.0.6",
    "redux-persist": "4.10.2",
    "redux-thunk": "2.2.0"
  },
  "devDependencies": {
    "babel-plugin-import": "1.6.3",
    "node-sass-chokidar": "0.0.3",
    "react-app-rewire-less": "2.1.0",
    "react-app-rewired": "1.4.0",
    "react-scripts": "1.0.17",
    "standard": "10.0.3"
  }
}
gaearon commented 6 years ago

I don’t think we can help without a reproducing project. It’s not obvious to me where the problem could be but I agree it sounds like a lot.

jaggerwang commented 6 years ago

When I modified just one file, I can see eslint result of all files. Is this right?

image

gaearon commented 6 years ago

Yes although I don’t understand why there’s a CSS file in there.

Again, it would be great if we could look at a project. It’s hard to say anything otherwise.

viankakrisna commented 6 years ago

Yes although I don’t understand why there’s a CSS file in there.

I see that the OP edited their post and included their package.json, and it has react-app-rewired-less there. maybe it's related?

As for the OP question, there are a lot of things that could affect recompile performance, maybe you have many import()s? And 700 files sounds like a big project.

If you are really concerned about the perf I recommend you to eject and explore https://github.com/mzgoddard/hard-source-webpack-plugin / https://github.com/amireh/happypack / https://github.com/asfktz/autodll-webpack-plugin solutions.

This is also a good read https://slack.engineering/keep-webpack-fast-a-field-guide-for-better-build-performance-f56a5995e8f1

Timer commented 6 years ago

tl;dr -- yes this is expected, it'll get better eventually

Closing as answered by @viankakrisna, but performance should get much better with the release of 2.x; there have been many performance improvements to webpack 4.