next.js: Slow development with Fast Refresh (10+ seconds)
What version of Next.js are you using?
10.2.0
What version of Node.js are you using?
16.0.0
What browser are you using?
Chrome
What operating system are you using?
Windows, tested it in both WSL 2 (Linux filesystem) and not with Windows directory filesystem
How are you deploying your application?
Have not deployed it yet, but will with Vercel
Describe the Bug
During the last months, even if I use the future: { weback5: true } option in the next.config.js file, I get very slow development time (~ 45+ seconds). I use TypeScript, and have enabled the typescript: { transpileOnly: true } option too in the configuration file. Is there anyway SCSS and SCSS Modules to overload the compilation process.
I added the ProgressPlugin and saw that most of the time used was for building the files, modules, and dependencies. Is there any way to minimize (or cache) and improve this process? Also, I noticed that Fast Refresh will update and recompile all the files of the SubComponents (e.g. <Input.Password />) that I use, meaning that it will re-compile all the files in the folder tree structure?
Although, I have enabled WSL, have switched back to WSL 1 because it seemed more performant. I do not run yarn dev in the WSL - Linux Ubuntu environment, but as regularly from the Windows CMD.
I tried running it on WSL 2, but it still takes up to 5+ seconds to refresh, even after the update where they state that the reload time will range from 100ms to 200ms!
- Generally in dev mode, it takes a lot of time to build a page, and navigate. In production, this does not happen at all.
- When I add components from my
/componentsfolder seems to make this delay, but I am not entirely sure why and how to fix it, rather than deleting all the component files. - It may be a custom package that I have created, but have not optimized and correctly packed for download via NPM and production use
Any ideas or suggestions to decrease the development time are welcome!
Really what do you do at Vercel, where you state that the development process is really fast?!?
Expected Behavior
I expected that Fast Refresh would re-compile / reload the code in about 1 second at least, without having to wait 10+ seconds.
To Reproduce
The repository the code lives in is private, but if it is needed I can make it public so that someone can explore the structure of the whole project and help me out.
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 5
- Comments: 41 (17 by maintainers)
@divmain Thank you for all your help. I appreciate it a lot. At least the development time has decreased a lit bit since I opened this issue, and things are a little better.
I still hope that things will get much better, either from a fix that I make or a faster Next.js refresh time. Thank you also for closing the issue, as you have said there are not other evidences and we cannot do something else.
@divmain the yarn.lock file is in the repro
Unfortunately no. I try to have more patience, but still the code does not refresh as fast as I see on others tutorial videos. The good thing is that improvements have been made and I believe the Next.js server is faster now than it was some months before, and I hope the team continues to improve its performance with the new upcoming versions.
@sanchezedgar Let me know if I can help you with any other questions.
I appreciate your understanding. Good luck on your project!
@divmain I will try something, but it is going to take some time, I will let you know.