You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have noticed that as my project grows (as more components, composables, modules, plugins are added) - the longer dev server startup takes. It took 27 seconds from the time I ran pnpm dev in console to first paint when the page opened. After that each page refresh was snappy - less than 1 sec. The issue is the dev server startup time to first paint. If my app grows 10 times - that means I will be waiting for 5 minutes on dev server start. I wanted to find out if there is a guilty module or code that was the reason behind this. I don't have a very fast computer plus I am developing in a Docker container (which adds a little bit of overhead but not much).
So I started removing layer by layer from my app, it's a mid size app (900 files in total, 6 months in development). As I removed modules, plugins and files, I noticed that with each thing I remove the dev server start time decreases. Eventually after removing everything, I got down to < 1 second (as with a fresh Nuxt app). This proved that it wasn't one thing that caused the slow dev server start but many things together, each adding a little bit to it.
It looks to me like we have a scaling problem with Nuxt. With each module, plugin, component that we add - we add to dev server startup time. Eventually, if we would add 100x modules, the time for dev server to start would be extremely long. That is a bottleneck for our app to scale and grow indefinitely. I thought Vite was supposed to solve this issue by loading only what we need to render the current page (in contrast to webpack bundling the whole app). Perhaps some of these modules could be initialized in the background or be delayed? My plugins were already set to initialize in parallel.
I also found it strange that I gained 4 seconds by removing all components, composables, utils even when they were not being used anywhere in the app. I guess the dev server still scanned them even when not being used anywhere. I literally had a page that said Hello World nothing else. And after removing all unused components, composables I gained 4 seconds.
Here are my findings, I cannot share the project since it is a company project (NDA etc.). But these are the times that I observed as I removed code from my app bit by bit. Yes, I took a stopwatch and measured dev server startup time multiple times after each thing I removed.
27 sec - dev server start ... to first paint (from pnpm dev to seeing something on the page)
24 sec - remove Tailwind and all CSS files (-3 seconds)
I don't know if there is anything that I can do to improve my dev server startup time besides removing strict typechecking and disabling timeline. All the other things are simply my app growing in size and requiring more modules, libraries, components etc.
I would love to hear your thoughts on this and some ideas how Nuxt could be optimized so that the app could grow indefinitely and not get slower with time. Should we split into microservices / microfontends? Is there some other way to scale a large app?
Additional context
No response
Logs
No response
The text was updated successfully, but these errors were encountered:
martinszeltins
changed the title
Degraded dev server start as project grows in size
Degraded dev server startup time as project grows in size
May 8, 2024
Type checking shouldn't add any time to dev server as it doesn't run unless you've manually enabled typescript.typeCheck, so you can ignore the strictness setting - it just powers your IDE and any manual typecheck step you run in CI.
This could be a (known) dev server performance issue with Vite. Make sure you have not disabled the network cache in your browser, as this can have a very significant impact on the dev server start. We should also investigate why/if this grows slower when code/components/composables that aren't used are added to the project.
Likely there is considerable space for us to optimise start-up time, however, and I would love to devote some time to tracking down opportunities for faster start.
I would love to devote some time to tracking down opportunities for faster start.
@danielroe Honestly, I would be willing to jump on a call with you right now and show you the project, perhaps get some ideas what is going on. Not so you could help me fix my project but if it helps understand what is causing it to slow down. Just a quick idea.
I checked, the cache is not disabled, Vite optimizing takes place only on the first dev server start, not subsequent ones. But still takes ~30 sec. to start.
Environment
Reproduction
N/A
Describe the bug
I have noticed that as my project grows (as more components, composables, modules, plugins are added) - the longer dev server startup takes. It took 27 seconds from the time I ran
pnpm dev
in console to first paint when the page opened. After that each page refresh was snappy - less than 1 sec. The issue is the dev server startup time to first paint. If my app grows 10 times - that means I will be waiting for 5 minutes on dev server start. I wanted to find out if there is a guilty module or code that was the reason behind this. I don't have a very fast computer plus I am developing in a Docker container (which adds a little bit of overhead but not much).So I started removing layer by layer from my app, it's a mid size app (900 files in total, 6 months in development). As I removed modules, plugins and files, I noticed that with each thing I remove the dev server start time decreases. Eventually after removing everything, I got down to < 1 second (as with a fresh Nuxt app). This proved that it wasn't one thing that caused the slow dev server start but many things together, each adding a little bit to it.
It looks to me like we have a scaling problem with Nuxt. With each module, plugin, component that we add - we add to dev server startup time. Eventually, if we would add 100x modules, the time for dev server to start would be extremely long. That is a bottleneck for our app to scale and grow indefinitely. I thought Vite was supposed to solve this issue by loading only what we need to render the current page (in contrast to webpack bundling the whole app). Perhaps some of these modules could be initialized in the background or be delayed? My plugins were already set to initialize in parallel.
I also found it strange that I gained 4 seconds by removing all components, composables, utils even when they were not being used anywhere in the app. I guess the dev server still scanned them even when not being used anywhere. I literally had a page that said
Hello World
nothing else. And after removing all unused components, composables I gained 4 seconds.Here are my findings, I cannot share the project since it is a company project (NDA etc.). But these are the times that I observed as I removed code from my app bit by bit. Yes, I took a stopwatch and measured dev server startup time multiple times after each thing I removed.
pnpm dev
to seeing something on the page)The outline of my app (that's as much as I can share):
I don't know if there is anything that I can do to improve my dev server startup time besides removing strict typechecking and disabling timeline. All the other things are simply my app growing in size and requiring more modules, libraries, components etc.
I would love to hear your thoughts on this and some ideas how Nuxt could be optimized so that the app could grow indefinitely and not get slower with time. Should we split into microservices / microfontends? Is there some other way to scale a large app?
Additional context
No response
Logs
No response
The text was updated successfully, but these errors were encountered: