Dev server startup increased from 20 seconds to 2 minutes after upgrade to 4.0.0

[jurosh]

Describe the bug

Dev server startup time increased drastically after upgrade to 4.0.0 from 3.4.3. From 20 seconds to more than 2 minutes afte upgrade.

Did you try recovering your dependencies?

Removed all node_modules before upgrading.

Which terms did you search for in User Guide?

Did not find anything related to this issue - slow startup time of devserver.

Environment

  current version of create-react-app: 4.0.0

System:
    OS: Linux 5.4 Ubuntu 20.04 LTS
   CPU: (8) x64 Intel(R) Core(TM) i7-** CPU @ 1.80GHz
Binaries:
    Node: 14.4.0 - ~/.nvm/versions/node/v14.4.0/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
npmPackages:
    react: 16.12.0 => 16.12.0 
    react-dom: 16.13.1 => 16.13.1 
    react-scripts: 4.0.0 => 4.0.0
   
   "typescript": "4.0.3",

Steps to reproduce

TBD - it might be somehow specific to our project. Which is medium size TypeScript project.

More info

I know that this report might be hard to reproduce and I will probably need to provide more information. But there also might be more people having same issue when comparing build/startup times and we might be able to figure out why is this happening - because this seems def as a bug, as build is incredibly slow now and this is blocker for upgrading to new version.

It might be related to project setup, but I dont have idea where to start debugging issue - maybe someone from maintainers will know what might be cause. And where to start look.

[jurosh]

Just found that there is closed issue with this problem #9886 Which seems to be related to eslint...

[krailler]

My production build is 3x slow on 4.0.0... And dev server startup is too slow... I saw that the map is generated on dev mode, is this the best? I guess that .map files are only usable on production build that is minified

[mareksuscak]

Our builds have slowed down considerably, too. In my opinion, eslint should NOT be a part of the dev build at all or at least should be configurable. These days, most devs run an eslint plugin in their IDE for a more integrated dev experience anyway. Another odd default is treating all eslint warnings as errors in a CI/CD environment without any way to opt out.

[krailler]

Disable eslint on dev server is the best way. We have eslint plugin on our IDE and also we have husky that checks the code before commit

[mareksuscak]

For anyone who finds this issue, here's how you can temporarily work around it using patch-package:

1. Set up patch-package
2. Create patches folder in your project root.
3. Create a new file inside the patches folder with a name react-scripts+4.0.0.patch:

diff --git a/node_modules/react-scripts/config/webpack.config.js b/node_modules/react-scripts/config/webpack.config.js
index 80c6ac2..3420936 100644
--- a/node_modules/react-scripts/config/webpack.config.js
+++ b/node_modules/react-scripts/config/webpack.config.js
@@ -752,6 +752,7 @@ module.exports = function (webpackEnv) {
         formatter: require.resolve('react-dev-utils/eslintFormatter'),
         eslintPath: require.resolve('eslint'),
         context: paths.appSrc,
+        cache: true,
         // ESLint class options
         cwd: paths.appPath,
         resolvePluginsRelativeTo: __dirname,

4. Run yarn
5. You may need to add .eslintcache to .gitignore
6. Optionally start the server using FAST_REFRESH=true yarn start to enable Fast Refresh

[davidlukerice]

FWIW that patch increases my local npm start time from 45s to 55s in my current project (after an initial 2min start time without a cache file). CRA v3 had a 30s startup time.

[jwchang0206]

Try compile with Rust
https://jwchang0206.medium.com/make-create-react-app-faster-with-rust-6c75ffa8fdfd

[akaltar]

This issue seems to be fixed by #9977 in release 4.0.2

[dcorns]

I had this issue where the bare bones app created by create-react-app was taking 2 minutes to finish when running start. I tracked the issue down to the openBrowser function. You can eliminate this function from startup either by ejecting and then editing the start script or by modifying the start text in package.json to "BROWSER=none react-scripts start". Then you will need to open the browser manually, but many people prefer that start does not open the browser window when it runs anyway which is why I think BROWSER=none exists as a parameter.

[pmioduszewski]

I had this issue where the bare bones app created by create-react-app was taking 2 minutes to finish when running start. I tracked the issue down to the openBrowser function. You can eliminate this function from startup either by ejecting and then editing the start script or by modifying the start text in package.json to "BROWSER=none react-scripts start". Then you will need to open the browser manually, but many people prefer that start does not open the browser window when it runs anyway which is why I think BROWSER=none exists as a parameter.

I love this comment, You saved me 1 year of life. With BROWSER=none the start script taking ~5-10 seconds! 🤯