Slow compilation still after upgrade to new version 4.0.1 #10154

dagar07 · 2020-11-26T07:55:51Z

This issue has been fixed in 4.0.1.
https://github.com/facebook/create-react-app/releases/tag/v4.0.1

The performance is much, much better now! Thank you! ❤🎉

This issue did not fix yet, still take around 30s to 40s to recompile the changes after a small change in the files

Originally posted by @raRaRa in #9966 (comment)

andrwo · 2020-11-26T08:24:03Z

I concur. I have upgraded to 4.0.1 (using Typescript 4.1.2).

Initial compile times are better.

But each time I modify a single tsx file, the diff re-"Compiling..." cycle is taking way longer than pre v4. Previously it takes around 2-3 seconds to reflect in browser, now it takes upwards of 15 seconds.

I tried with both setting in .env file FAST_REFRESH = true and false, no difference.

eek · 2020-11-26T10:08:57Z

I have the same issue. Extremely slow compile and recompile times.

I tried measuring the compile time with https://github.com/stephencookdev/speed-measure-webpack-plugin to see what's so slow.

This is my benchmark:

Unfortunately I couldn't run it on re-compile after a file update because apparently it breaks. Might have something to do with stephencookdev/speed-measure-webpack-plugin#44

But, it's extremely slow lol. And also the discussions (like this - #9909) aren't very helpful

ahrbil · 2020-11-26T11:06:33Z

Did you guys notice any slow build time as well?
I can't even build our app on CI as it is always failing due to time out after upgrading to both v4.0.0 and v4.0.1

jamiehaywood · 2020-11-26T17:10:08Z

@ahrbil could you detail your issues some more about the CI? I encountered the same issue today. Build keeps timing out (even though it's already built the static files!):

maxsbelt · 2020-11-26T17:47:55Z

I tried to debug my app using speed-measure-webpack-plugin (thanks @eek for suggestion) and figured out that problem is 100% (at least in my case) related to ESLintPlugin. Here some metrics:

version 3.4.4	version 4.0.1	version 4.0.1 (second run)	version 4.0.1 without ESLintPlugin

You can try if it works in your case by commenting out the plugin in node_modules/react-scripts/config/webpack.config.js:

As a temporary solution you can use react-app-rewired with such config-override:

module.exports = (config) => {
  config.plugins = config.plugins.filter(
    (plugin) => !(plugin.options && plugin.options.eslintPath)
  );
  return config;
};

ejose19 · 2020-11-27T02:17:24Z

@maxsbelt Thanks, the speeds after that change are amazing, just a couple of seconds for initial compilation and 1s for recompilation. Here's a patch for those using patch-package

diff --git a/node_modules/react-scripts/config/webpack.config.js b/node_modules/react-scripts/config/webpack.config.js
index eddca1b..954abe9 100644
--- a/node_modules/react-scripts/config/webpack.config.js
+++ b/node_modules/react-scripts/config/webpack.config.js
@@ -750,7 +750,7 @@ module.exports = function (webpackEnv) {
           // The formatter is invoked directly in WebpackDevServerUtils during development
           formatter: isEnvProduction ? typescriptFormatter : undefined,
         }),
-      new ESLintPlugin({
+      isEnvProduction && new ESLintPlugin({
         // Plugin options
         extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
         formatter: require.resolve('react-dev-utils/eslintFormatter'),

dagar07 · 2020-11-27T05:56:42Z

I tried to debug my app using speed-measure-webpack-plugin (thanks @eek for suggestion) and figured out that problem is 100% (at least in my case) related to ESLintPlugin. Here some metrics:

version 3.4.4 version 4.0.1 version 4.0.1 (second run) version 4.0.1 without ESLintPlugin

You can try if it works in your case by commenting out the plugin in node_modules/react-scripts/config/webpack.config.js:

As a temporary solution you can use react-app-rewired with such config-override:
module.exports = (config) => {
  config.plugins = config.plugins.filter(
    (plugin) => !(plugin.options && plugin.options.eslintPath)
  );
  return config;
};

Not worked for me

JanJakes · 2020-11-27T09:22:15Z

May be related to #10119.

ahrbil · 2020-11-27T10:12:26Z

@ahrbil could you detail your issues some more about the CI? I encountered the same issue today. Build keeps timing out (even though it's already built the static files!):

@jamiehaywood
it's the same issue we are facing too

eek · 2020-11-27T10:13:45Z

@JanJakes that's true, the issue seems to be related to threads: false.

I've added that to the ESLintPlugin options and now it's fast compiling again.

I've tested it with overriding the config. If you have craco or react-app-rewired you can test it with:

overrideWebpackConfig: ({ webpackConfig }) => {
    webpackConfig.plugins = webpackConfig.plugins.filter(
        (plugin) => !(plugin.options && 'eslintPath' in plugin.options)
    );

    webpackConfig.plugins.unshift(new ESLintPlugin({
        // Plugin options
        extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
        formatter: require.resolve('react-dev-utils/eslintFormatter'),
        eslintPath: require.resolve('eslint'),
        context: './src',
        cache: true,

		// Setting threads to false boost compiling speed back to previous levels
        threads: false,

        // ESLint class options
        cwd: fs.realpathSync(process.cwd()),
        resolvePluginsRelativeTo: __dirname,
        baseConfig: {
            extends: [require.resolve('eslint-config-react-app/base')],
            rules: {
                'react/react-in-jsx-scope': 'error',
            },
        },
    }));

    return webpackConfig;
}

replace overrideWebpackConfig: ({ webpackConfig }) => { with module.exports = (webpackConfig) => { for react-app-rewired

cc - webpack-contrib/eslint-webpack-plugin#50 (comment)
cc - #10119

dagar07 · 2020-11-27T18:26:34Z

@eek I have done the same thing and but it's not working

eek · 2020-11-30T13:42:44Z

@eek I have done the same thing and but it's not working

@dagar07 try this:

ADD:

  "resolutions": {
    "react-scripts/eslint-webpack-plugin": "2.3.0"
  }

at the end of the package.json file and then write yarn for it to install with the proper resolution. Should work fast afterwards.

dagar07 · 2020-12-01T05:47:52Z

@eek I have done the same thing and but it's not working

@dagar07 try this:

ADD:
  "resolutions": {
    "react-scripts/eslint-webpack-plugin": "2.3.0"
  }
at the end of the package.json file and then write yarn for it to install with the proper resolution. Should work fast afterwards.

I have added yarn module and using the yarn now, but not working ... with recompile

MaximeBernard · 2020-12-04T14:47:57Z

Thanks @maxsbelt, commenting ESLintPlugin helped my compile time from 32s to 16s. My yarn start recompile time is almost instantaneous. You made my developer experience great again 😄

jamiehaywood · 2020-12-04T16:44:17Z

for anyone that is using CRA 4.0.1 in a monorepo (using lerna) - add:

  "resolutions": {
    "react-scripts/eslint-webpack-plugin": "2.3.0"
  }

to the root package.json and it should fix the slow reloading issues.

eek · 2020-12-06T08:44:05Z

for anyone that is using CRA 4.0.1 in a monorepo (using lerna) - add:
  "resolutions": {
    "react-scripts/eslint-webpack-plugin": "2.3.0"
  }
to the root package.json and it should fix the slow reloading issues.

@jamiehaywood It was fixed in eslint-webpack-plugin 2.4.1

ejose19 · 2020-12-08T16:44:35Z

@PraveenVerma17 As I'm using npm and can't pin eslint-webpack-plugin, I'm using the change stated by @eek which works correctly

diff --git a/node_modules/react-scripts/config/webpack.config.js b/node_modules/react-scripts/config/webpack.config.js
index eddca1b..8652fc3 100644
--- a/node_modules/react-scripts/config/webpack.config.js
+++ b/node_modules/react-scripts/config/webpack.config.js
@@ -757,6 +757,7 @@ module.exports = function (webpackEnv) {
         eslintPath: require.resolve('eslint'),
         context: paths.appSrc,
         cache: true,
+        threads: false,
         // ESLint class options
         cwd: paths.appPath,
         resolvePluginsRelativeTo: __dirname,

ejose19 · 2020-12-08T22:07:53Z

@PraveenVerma17 Are you using react-scripts v4.0.1?

eek · 2020-12-09T08:16:14Z

@PraveenVerma17 just delete the node_modules folder and install again, it should automatically install the latest eslint-webpack-plugin which no longer has the issue.

ejose19 · 2020-12-09T18:38:24Z

@eek Correct, there's no longer need for a patch as it works correctly on eslint-webpack-plugin v2.4.1, however if they're using npm and already had a package-lock.json it won't update the version even after deleting node_modules and installing again. @PraveenVerma17 What you need to do is, remove the patch and run npm uninstall react-scripts && npm install -D react-scripts so you actually get the latest version.

benduran · 2020-12-10T22:39:08Z

Hi folks 👋
Wanted to chime in and say that I'm glad to see there's discussion around this issue. I've recently attempted an upgrade to a few applications. Some applications build fine, but are noticeably slower. One application hangs almost indefinitely, and pegs my disk I/O at 100% usage, rendering my system nearly unusable. The last stable version of CRA3.X worked like a charm, no issues.

emersonlaurentino · 2020-12-17T02:37:49Z

using resolutions worked correctly for me, btw thanks @eek and @jamiehaywood

"resolutions": {
  "react-scripts/eslint-webpack-plugin": "2.4.1"
}

dagar07 · 2021-01-06T13:18:26Z

@eek I have updated to "eslint-webpack-plugin": "^2.4.1", but its not solve,
Please help me to fix this

jarretmoses · 2021-01-29T21:36:25Z

Is there an update with this issue? 4.x is still unusable for me as compile times are way too long. Especially the initial startup. Im all up to date versioning have cleared my node modules, followed other suggestion but everything is still extremely slow.

fo-fo · 2021-01-30T13:30:29Z

Our initial startup time has gone from ~40s (react-scripts 3.4.0) to ~3m30s (react-scripts 4.0.1), a 5x increase.

EDIT: Disabling ESLintPlugin brings it down to around 1m20s, but still not very happy about it 😕 (2x increase)

andrwo · 2021-02-06T06:17:04Z

Anyone tried if the 4.0.2 update that just dropped fixes this issue?

xfournet · 2021-02-06T11:14:08Z

@andrwo yes the DISABLE_ESLINT_PLUGIN option fix my compilation speed problem (i have my own setup of eslint). See #10170

leojh · 2021-02-09T19:30:53Z

at least for us it improved start substantially. it's now back to about the same it was before CRA 4.

stclairdaniel · 2021-03-30T21:04:09Z

I'm still getting quite slow start and lint speeds on react-scripts 4.3.0, even with

"resolutions": {
  "react-scripts/eslint-webpack-plugin": "2.4.1"
}

Tiberriver256 · 2021-04-13T21:58:13Z

Resolutions resolved the issue for me on initial build time

Jayaramstarr · 2021-05-05T13:29:57Z

@JanJakes that's true, the issue seems to be related to threads: false.

I've added that to the ESLintPlugin options and now it's fast compiling again.

I've tested it with overriding the config. If you have craco or react-app-rewired you can test it with:

overrideWebpackConfig: ({ webpackConfig }) => {
    webpackConfig.plugins = webpackConfig.plugins.filter(
        (plugin) => !(plugin.options && 'eslintPath' in plugin.options)
    );

    webpackConfig.plugins.unshift(new ESLintPlugin({
        // Plugin options
        extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
        formatter: require.resolve('react-dev-utils/eslintFormatter'),
        eslintPath: require.resolve('eslint'),
        context: './src',
        cache: true,

		// Setting threads to false boost compiling speed back to previous levels
        threads: false,

        // ESLint class options
        cwd: fs.realpathSync(process.cwd()),
        resolvePluginsRelativeTo: __dirname,
        baseConfig: {
            extends: [require.resolve('eslint-config-react-app/base')],
            rules: {
                'react/react-in-jsx-scope': 'error',
            },
        },
    }));

    return webpackConfig;
}

replace overrideWebpackConfig: ({ webpackConfig }) => { with module.exports = (webpackConfig) => { for react-app-rewired

cc - webpack-contrib/eslint-webpack-plugin#50 (comment)
cc - #10119

Can you tell me the file and the file path where to set this?

ivanviskovic · 2021-07-05T10:42:31Z

Also very slow build time. When i tried to debug it with speed-measure-webpack-plugin but could not find anything.

Anyone have any idea what might be the problem?

SamKirkland · 2021-07-26T06:34:57Z

Root Problem in my case

Create React App uses CaseSensitivePathsPlugin and IgnorePlugin. In my case replacing these two plugins with alternatives reduced my dev environment build time from 14 minutes to 3 minutes. I did a bit of research and it appears these two plugins account for 60-80% of the build time for other projects on github. So I figured I would leave instructions here on how to implement these changes. I would like to put together a PR for these changes, so please leave feedback and I'll make a PR if all goes well with others.

Notes about these changes

The CaseSensitivePathsPlugin is already disabled on the production build. Which means these changes mostly help the dev build. These changes worked for me. But that does not mean they will work for you. Please run the speed-measure-webpack-plugin before making these changes. Also if these changes do fix your build issues please leave a comment with before/after timings or feedback so I can put together a Pull Request.

That being said I think this change could help a few people:

@eek build shows CaseSensitivePathsPlugin and IgnorePlugin taking almost 6 minutes of his 8 minute build (about 75% of the build time).
@maxsbelt build shows CaseSensitivePathsPlugin and IgnorePlugin taking up to 13 seconds of a 37 second build (about 30% of the build time).

Testing these changes on the largest CRA project I've contributed to (AppSmith) made the following changes.

Before (8 minutes)

After (2.2 minutes)

^ timings are averages over 3 runs

Solution

We are going to replace both the CaseSensitivePathsPlugin and IgnorePlugin plugins. To do so we need craco to make modification to CRA webpack config without ejecting.

Craco config

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const MomentLocalesPlugin = require("moment-locales-webpack-plugin");

module.exports = {
    plugins: [
        {
            plugin: {
                overrideWebpackConfig: ({ webpackConfig }) => {
                    // remove CaseSensitivePathsPlugin (replace with tsconfig setting or eslint setting)
                    webpackConfig.plugins = webpackConfig.plugins.filter(
                        (plugin) => plugin.constructor.name !== "CaseSensitivePathsPlugin"
                    );

                    // remove IgnorePlugin
                    webpackConfig.plugins = webpackConfig.plugins.filter(
                        (plugin) => plugin.constructor.name !== "IgnorePlugin"
                    );
                    // add new ContextReplacementPlugin via moment-locales-webpack-plugin
                    webpackConfig.plugins.push(new MomentLocalesPlugin()); // exclude all locales except en
            
                    const smp = new SpeedMeasurePlugin({
                        outputFormat: "humanVerbose",
                        loaderTopFiles: 5,
                    });
        
                    return smp.wrap(webpackConfig);
                },
            }
        }
    ]
};

What is case-sensitive-paths-webpack-plugin doing?

See the code in CRA webconfig
Why does this plugin exist, well looking at the github history it adds checks for NTFS (windows) vs. APFS (mac) file systems. If all your machines are on a single OS, including build servers you could remove this plugin.

However I want to keep it around just in case someone on my team develops on another OS. One option is to use ESLint instead with the eslint-plugin-import plugin and its caseSensitive option. Or if you are using typescript remove the plugin and enable the tsconfig option forceConsistentCasingInFileNames which will do the same thing in a fraction of the time - this is what I did. Note: I need to do some more testing to verify ESLint/Typescript are doing the equivalent checks. One concern I have is these alternatives are not recursively checking the dir tree.

What is IgnorePlugin doing?

See the code in CRA webconfig
This configuration of the IgnorePlugin helps reduce the bundle size when using moment js. However swapping it out with the newer ContextReplacementPlugin improves performance dramatically.

Maintainer for Performance?

@gaearon / @Timer / @ianschmitz Any thoughts on adding a maintainer for performance related issues. As you know perf issues are normally the last priority so there might be some value in a dedicated perf maintainer. (related #8096 (comment))

FezVrasta · 2021-10-03T13:12:26Z

I just tested the above suggestions and I couldn't observe any performance difference at all in my setup. I'm on macOS Big Sur on a Late 2014 iMac 5k (3.5 GHz Quad-Core Intel Core i5)

What I noticed is that InjectManifest plugin takes almost 7 seconds to run. It seems a lot, maybe something can be done to optimize it.

Mathieuu · 2022-01-06T02:07:34Z

For our project, the performance gain is dramatic. I followed SamKirkland comment and simply filtered CaseSensitivePathsPlugin and IgnorePlugin
plugin. (Macbook pro 2019 i9 8core with 32GB of ram, yarn running directly in mac os)

Before/After

rkhaslarov · 2022-04-12T09:29:49Z

In out case it's babel-loader
SMP ⏱
General output time took 71,230 ms

SMP ⏱ Loaders
@pmmmwh/react-refresh-webpack-plugin, and
babel-loader took 58,561 ms

OR even

@pmmmwh/react-refresh-webpack-plugin, and
babel-loader took 1,062,270 ms

did anyone faced the issue?

suraj-adewale · 2022-05-20T23:01:11Z

Hi everyone,
I had similar experience, however I was able to fix it with following steps:

I create a new react app. npx create-react-app my-app
I tested npm start and it was running faster.
I now compared package.json of my-app with my existing project
I updated package.json of my exiting project(slow) with "react": "^18.1.0", "react-dom": "^18.1.0", "react-scripts": "5.0.1",
Then npm install. Done. Try this and let me hear your feedback

jonnycbw · 2022-05-22T00:09:19Z

@suraj-adewale

Hi everyone,

I had similar experience, however I was able to fix it with following steps:

I create a new react app. npx create-react-app my-app

I tested npm start and it was running faster.

I now compared package.json of my-app with my existing project

I updated package.json of my exiting project(slow) with "react": "^18.1.0", "react-dom": "^18.1.0", "react-scripts": "5.0.1",

Then npm install. Done. Try this and let me hear your feedback

Unfortunately this didn't work for me, we ended up regressing back to react-scripts 3.4.3, where it's still slow but not as slow as 4.0.1 or 5.0.1. I'm gonna give the craco solution a try to see if that helps at all.

In our case we have multiple packages but not in a monorepo, just yarn linked. We're not fussed so much about build times but more about recompile time after making changes (hmr)

facebook/create-react-app#10154 (comment)

dagar07 changed the title ~~This issue has been fixed in 4.0.1.~~ Slow compilation still after upgrade to new version 4.0.1 Nov 26, 2020

maxsbelt mentioned this issue Nov 27, 2020

Very slow recompile times (~20 seconds) #9886

Closed

eek mentioned this issue Nov 27, 2020

Threads massively slows down linting / re-linting webpack-contrib/eslint-webpack-plugin#52

Closed

Chris-Thompson-bnsf mentioned this issue Jan 21, 2021

disable linting on yarn start #10414

Closed

mareksuscak mentioned this issue Apr 7, 2021

Too many cpu and ram usage on production build #10119

Open

penguineer added a commit to penguineer/cleanURI-webui that referenced this issue Aug 2, 2022

⚡ Try to fix slow react-script run

6337414

facebook/create-react-app#10154 (comment)

penguineer mentioned this issue Aug 2, 2022

⚡ Improve the runtime of the docker-publish workflow penguineer/cleanURI-webui#6

Merged

penguineer added a commit to penguineer/cleanURI-webui that referenced this issue Aug 2, 2022

⚡ Try to fix slow react-script run

13a8fca

facebook/create-react-app#10154 (comment)

penguineer added a commit to penguineer/cleanURI-webui that referenced this issue Aug 2, 2022

⚡ Try to fix slow react-script run

dd39050

facebook/create-react-app#10154 (comment)

penguineer added a commit to penguineer/cleanURI-webui that referenced this issue Aug 2, 2022

⚡ Try to fix slow react-script run

63573ad

facebook/create-react-app#10154 (comment)

Slow compilation still after upgrade to new version 4.0.1 #10154

Slow compilation still after upgrade to new version 4.0.1 #10154

Comments

dagar07 commented Nov 26, 2020 • edited Loading

andrwo commented Nov 26, 2020

eek commented Nov 26, 2020 • edited Loading

ahrbil commented Nov 26, 2020

jamiehaywood commented Nov 26, 2020

maxsbelt commented Nov 26, 2020 • edited Loading

ejose19 commented Nov 27, 2020 • edited Loading

dagar07 commented Nov 27, 2020

JanJakes commented Nov 27, 2020

ahrbil commented Nov 27, 2020

eek commented Nov 27, 2020 • edited Loading

dagar07 commented Nov 27, 2020

eek commented Nov 30, 2020

dagar07 commented Dec 1, 2020

MaximeBernard commented Dec 4, 2020

jamiehaywood commented Dec 4, 2020

eek commented Dec 6, 2020

ejose19 commented Dec 8, 2020

ejose19 commented Dec 8, 2020

eek commented Dec 9, 2020

ejose19 commented Dec 9, 2020

benduran commented Dec 10, 2020

emersonlaurentino commented Dec 17, 2020

dagar07 commented Jan 6, 2021

jarretmoses commented Jan 29, 2021

fo-fo commented Jan 30, 2021 • edited Loading

andrwo commented Feb 6, 2021

xfournet commented Feb 6, 2021

leojh commented Feb 9, 2021

stclairdaniel commented Mar 30, 2021

Tiberriver256 commented Apr 13, 2021

Jayaramstarr commented May 5, 2021

ivanviskovic commented Jul 5, 2021

SamKirkland commented Jul 26, 2021

Root Problem in my case

Notes about these changes

Before (8 minutes)

After (2.2 minutes)

Solution

Craco config

What is case-sensitive-paths-webpack-plugin doing?

What is IgnorePlugin doing?

Maintainer for Performance?

FezVrasta commented Oct 3, 2021 • edited Loading

Mathieuu commented Jan 6, 2022 • edited Loading

rkhaslarov commented Apr 12, 2022

suraj-adewale commented May 20, 2022

jonnycbw commented May 22, 2022 • edited Loading

dagar07 commented Nov 26, 2020 •

edited

Loading

eek commented Nov 26, 2020 •

edited

Loading

maxsbelt commented Nov 26, 2020 •

edited

Loading

ejose19 commented Nov 27, 2020 •

edited

Loading

eek commented Nov 27, 2020 •

edited

Loading

fo-fo commented Jan 30, 2021 •

edited

Loading

FezVrasta commented Oct 3, 2021 •

edited

Loading

Mathieuu commented Jan 6, 2022 •

edited

Loading

jonnycbw commented May 22, 2022 •

edited

Loading