Skip to content

npm start performance issue > 5 minutes #9299

Description

@DiegoMcDipster

Hi,

I just:

  1. created a new app via: npx create-react-app my-app.
  2. made no changes to the code
  3. ran: npm start

This takes over 5 minutes to return 'Compiled Successfully'.
localhost:3000 shows the default page. So, that seems to be working fine... it just takes an age to get to it.
Console has the first line : [HMR] Waiting for update signal from WDS...

I am running WSL2.
Ubuntu 18.04.4
Windows 10 Home Insider Preview.
Build 20161.rs_prerelease.200627-1754.

Also note (I'm not sure if this is relevant) I have been able to successfully run nodejs applications without any problems. But they used the command "npm run ..." & nodemon.

Your help would really be appreciated! I just started a tutorial and it's impossible to follow it with this performing so badly.

Regards!

Activity

  1. DiegoMcDipster commented on Jul 14, 2020

    @DiegoMcDipster
    Author

    An update on this as i've been trying different things out.
    I tried the react boilerplate found here: https://github.com/react-boilerplate/react-boilerplate

    once that's installed, i run npm start and the server starts within 10 seconds.

    What this tells me is that:

    1. the issue is not with my hardware.
    2. the issue is not with WSL2.
    3. the issue is not with npm.

    Hope this helps!

    PS. unfortunately I can't use the boilerplate as the file/directory structure is completely different from the tutorial that i'm following. So... you're help would really be appreciated.
    pps. if you need logs, please advise me on how to produce them and i will provide.

  2. HemanthDavuluri commented on Jul 17, 2020

    @HemanthDavuluri

    I always delete the default created js files and create my own . Its works fine and yes it would be easy to clarify this if you let us know hoe to produce the error again.

  3. DiegoMcDipster commented on Jul 17, 2020

    @DiegoMcDipster
    Author

    @HemanthDavuluri , thanks for taking the time to reply! I really appreciate it.

    Which default js files do you mean? I've already tried removing all files from the src folder and running with an extremely simple index.js that does a console.log('test');
    The server still took approx 5 minutes to start

    To re-create it i do the steps:

    1. create a new app via: npx create-react-app my-app.
    2. run: npm start

    I'm a complete novice at react and nodejs. So, can you advise on how i can monitor the npm start, so that i can see which process it is that is taking ages to start up? For example is there any way of seeing something like
    process 1 - 200 ms
    process 2 - 240 seconds
    process 3 - 1 ms
    ....

  4. HemanthDavuluri commented on Jul 17, 2020

    @HemanthDavuluri

    Yes even i delete the complete src folder and recreate it . i dont know what is the problem that is leading more build time on your machine!

  5. DiegoMcDipster commented on Aug 3, 2020

    @DiegoMcDipster
    Author

    Just to keep you guys in the loop. It turns out this was a WSL2 issue. For details on how to resolve check out : https://docs.microsoft.com/en-us/windows/wsl/compare-versions#use-the-linux-file-system-for-faster-performance

    This one simple change solved the problem and it's running faster than Lightening McQueen!

  6. vsolisdevelop commented on Feb 21, 2021

    @vsolisdevelop

    Thanks a lot!!!

  7. iam-hbk commented on Nov 11, 2021

    @iam-hbk

    Hi, as for me, I don't use WSL, I have ubuntu directly installed on my computer and npm takes too long to start, anybody who knows what could be the issue ? my hardware is quite reliable (16Gb ram, i5 6th gen CPU)

  8. IIT-Bhupendra commented on Nov 20, 2021

    @IIT-Bhupendra

    Just to keep you guys in the loop. It turns out this was a WSL2 issue. For details on how to resolve check out : https://docs.microsoft.com/en-us/windows/wsl/compare-versions#use-the-linux-file-system-for-faster-performance

    This one simple change solved the problem and it's running faster than Lightening McQueen!

    Can you please bring more details here about this one simple change?

  9. DiegoMcDipster commented on Nov 20, 2021

    @DiegoMcDipster
    Author

    @IIT-Bhupendra: Here's the issue I logged with WSL #5705

    If that doesn't answer your question, can you be specific please?

  10. IIT-Bhupendra commented on Nov 21, 2021

    @IIT-Bhupendra

    @DiegoMcDipster: Actually, I was having a similar issue that you have mentioned in #5705, i.e., npm start takes 2-5 minutes to load a simple react app.
    Therefore, I had gone through different articles, posts, queries, etc. But I concluded that yarn is faster than npm due to its caching properties. So, I just installed yarn, checked it, and then I uninstalled the yarn, and now my npm start is also working very fine 😁😄. Now, It takes hardly a second to load the application.

  11. DiegoMcDipster commented on Nov 21, 2021

    @DiegoMcDipster
    Author

    @IIT-Bhupendra, Good to hear! Happy hacking!

  12. msmriyaz commented on Mar 1, 2022

    @msmriyaz

    For better performance avoid developing react artifacts within /mnt/ path as they access the windows path via a proxy, this makes the npm start awfully very slow. move your project under /home path of your WSL2 instance (this is a path internal to VM) and run the npm start from there mine started at a blasting speed -
    webpack 5.69.1 compiled successfully in 581 ms

    My project path now is - ~/dev/react/ReactProjects/my-app

  13. dcorns commented on Mar 2, 2022

    @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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions