search

waterthetrees / wtt_front

Water the Trees React frontend
https://waterthetrees.com
Creative Commons Zero v1.0 Universal
9 stars 24 forks source link

Investigate further improving webpack local dev load times #624

Open mwpark2014 opened 1 year ago

mwpark2014 commented 1 year ago

It currently takes 70-80s to start up on a high powered desktop. 2023-04-04 22:20:05: webpack 5.76.3 compiled successfully in 79850 ms 2023-04-04 22:47:45: webpack 5.76.3 compiled successfully in 70144 ms

zoobot commented 1 year ago

I am seeing the loading screen on refresh after update to React 18 so we may want to look into whether there are further clean up tasks we can do related to the update. It is fine on prod tho.

mwpark2014 commented 1 year ago

On local dev, hot reloads tend to take ~3s and doing a bunch of hot reloads at the same time can cause webpack to crash.

zoobot commented 1 year ago

Yeah I think that's why I started messing with it months ago and messed it up in the process. I've stopped using it again as it just stops working for me and I never know when that's going to happen, which means it's tough to tell if changes are working. I think I remember reading that aggregateTimeout changes could fix but will have to revisit when it's not end of the day. Now that @PGrad has moved watchOptions out of the devServer into the correct location, maybe aggregate timer changes will work.

zoobot commented 1 year ago

Thanks for adding a comment that you are having issues, I thought it was just my machine.

mwpark2014 commented 1 year ago

I'm further having issues with chrome dev tools linking to the right webpack lines of code. These links open to unresolvable blank pages:

image

Kinda frustrating developing on local dev... is there a possibility of reverting the react 18 upgrade or prioritizing these webpack fixes? Or at least could I have some context on why we upgraded to react 18? @PGrad

zoobot commented 1 year ago

@mwpark2014 Can you screenshot the entire error? I was having issues linking recently and had to completely remove my node modules and reinstall with npm ci and that fixed my issue. Have you tried that?

Can you make a list of all the issues you are having so we can tackle each of them?

zoobot commented 1 year ago

That being said, I can try to work on at least the hot reloading issue with webpack serve later today. My hot reloading issues were happening before the react 18 upgrade so I am not sure that specifically is related. React 18 did introduce slowness though. The reason Paul wanted to upgrade was for the carousel which we are not currently using. If we want to downgrade, we can as that carousel is not being used for now.

mwpark2014 commented 1 year ago

@mwpark2014 Can you screenshot the entire error? I was having issues linking recently and had to completely remove my node modules and reinstall with npm ci and that fixed my issue. Have you tried that?

Can you make a list of all the issues you are having so we can tackle each of them?

The errors themselves are not the issue. Those are the errors on my local branch (and now fixed). The problem is that the links for each error directs to a webpack-internal:///./node_modules link, which is broken for me, which makes it hard to debug issues locally.

Hmm, I haven't really looked into the issue so I have no idea if it is actually related to the react 18 upgrade. Just seemed like around the same timing

PGrad commented 1 year ago

@mwpark2014 what branch are you seeing those errors on? I'm not seeing them on the latest main. I want to be able to reproduce the errors so I can try to fix them.

zoobot commented 1 year ago

@PGrad If you are game to try to improve hot reloading, that'd be awesome.

On local dev, hot reloads tend to take ~3s and doing a bunch of hot reloads at the same time can cause webpack to crash.

@PGrad ^^ This is the general issue Mason and I are having, on any given branch. The hot reloading crashing was happening to me before the react 18 upgrade. The slowness started after the upgrade. May be two separate issues?

I was going to try to tweak "aggregateTimeout" to see if that helped with the crashing. I also suspect VSCode because it seems to change if I quit and re-open. I have Version: 1.77.1 going. Will try an update. What version do you two use? Are you running the app from the terminal within VSCode or from OSX terminal?

Does your hot reloading crash?

mwpark2014 commented 1 year ago

@mwpark2014 what branch are you seeing those errors on? I'm not seeing them on the latest main. I want to be able to reproduce the errors so I can try to fix them.

I fixed them so this issue is not immediately pressing to me. If I run into this situation again, I'll make sure to create a separate test branch to repro