Create-react-app: Production build is taking more than 25 mins earlier it was taking 6 mins

[PraveenVerma17]

Describe the bug

Production build react-scripts build is now taking more than 25 mins earlier it was taking 6 mins
Using react-scripts 4.0.0

trying to rollback to script 3.4.3 and will see the build prformance

Did you try recovering your dependencies?

(Write your answer here.)

Which terms did you search for in User Guide?

(Write your answer here if relevant.)

Environment

(paste the output of the command here.)

Steps to reproduce

(Write your steps here:)

1.
2.
3.

Expected behavior

Build should take 6-7 mins

Actual behavior

Build is taking more than 25 mins.

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)

[HugoGiraudel]

Duplicate of #9966.

[mareksuscak]

Here's a workaround: https://github.com/facebook/create-react-app/issues/9930#issuecomment-719037994

[PraveenVerma17]

@mareksuscak there is no improvement in production build performance. Still take 25 mins before this change build was taking 6 mins. It did help in local development now hot reloading is happening fast. There could be some other issue while creating production build.
react-scripts build command

[mareksuscak]

Yeah I feel like eslint is the culprit here and should not be run as part of the build. We can always run eslint outside of the build context.

[PraveenVerma17]

Agree, I have eslint for my src folder files and it takes 30 sec to check all files. as we don't get log we have not idea whats going on in backend. This is really frustrating.

[PraveenVerma17]

I see one of new bug created today #9997 says react-scripts ignores .eslintignore files. This could be another reason build take so much time. as it might be scanning node_modules files too.

[PraveenVerma17]

Hi React-scripts team,
How long do you guys need to identify this issue and to fix ?
Its been already 4 working days.

[pascalstr]

They should really split the 4.0.1 release and fix the performance issues first.

[arogozine]

@pascalstr
I've been following this repository for many months now because of multitude of bugs. The previous release was in March. It took over half a year for a new release despite countless bugs and library updates in that time. There seems to be a commit every couple of days or weeks.

I read in one of the issues or PRs that the maintainers are not FB employees (does FB even use react anymore?) which somewhat explains why things are moving at snail's pace.

[PraveenVerma17]

team, when are you planning to fix this build performance issue. This is really painful to see build to run for 30 mins. Please priorities this issue.

[HugoGiraudel]

There is a great non-intrusive workaround mentioned by @mareksuscak: https://github.com/facebook/create-react-app/issues/9975#issuecomment-720368060

[PraveenVerma17]

@HugoGiraudel - I have replied that fix did not help in prod build, it only help in hot reloading.

[pascalstr]

@pascalstr
I've been following this repository for many months now because of multitude of bugs. The previous release was in March. It took over half a year for a new release despite countless bugs and library updates in that time. There seems to be a commit every couple of days or weeks.

I read in one of the issues or PRs that the maintainers are not FB employees (does FB even use react anymore?) which somewhat explains why things are moving at snail's pace.

Yeah it is looking pretty stale and so many projects / tutorials are depending on it. Just no response after a broken major release, it will reflect bad on React. It was a great tool once but looking at the current state it seems like abandoning this is a safe choice instead of relying on this project.

[Guria]

See also excluding IgnorePlugin if you are not using moment.js. In our case it took 2 minutes (7 minutes total).
Excluding Eslint and Ignore plugins led us from 7minutes to 2 minutes.

eg, If you use config overrides packages:

const ESLintPlugin = require('eslint-webpack-plugin');
const webpack = require('webpack');

const exludePlugins = [webpack.IgnorePlugin, ESLintPlugin];

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      webpackConfig.plugins = webpackConfig.plugins.filter((p) => !exludePlugins.some((e) => p instanceof e));
      return webpackConfig;
    },
  },
};