npm start performance issue > 5 minutes #9299
Description
Hi,
I just:
- created a new app via: npx create-react-app my-app.
- made no changes to the code
- 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
DiegoMcDipster commentedon Jul 14, 2020
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:
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.
HemanthDavuluri commentedon Jul 17, 2020
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.
DiegoMcDipster commentedon Jul 17, 2020
@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:
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
....
HemanthDavuluri commentedon Jul 17, 2020
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!
DiegoMcDipster commentedon Aug 3, 2020
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!
vsolisdevelop commentedon Feb 21, 2021
Thanks a lot!!!
iam-hbk commentedon Nov 11, 2021
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)
IIT-Bhupendra commentedon Nov 20, 2021
Can you please bring more details here about this one simple change?
DiegoMcDipster commentedon Nov 20, 2021
@IIT-Bhupendra: Here's the issue I logged with WSL #5705
If that doesn't answer your question, can you be specific please?
IIT-Bhupendra commentedon Nov 21, 2021
@DiegoMcDipster: Actually, I was having a similar issue that you have mentioned in #5705, i.e.,
npm starttakes 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
npmdue to its caching properties. So, I just installedyarn, checked it, and then I uninstalled theyarn, and now mynpm startis also working very fine 😁😄. Now, It takes hardly a second to load the application.DiegoMcDipster commentedon Nov 21, 2021
@IIT-Bhupendra, Good to hear! Happy hacking!
msmriyaz commentedon Mar 1, 2022
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
dcorns commentedon Mar 2, 2022
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.