Degraded dev server startup time as project grows in size

[martinszeltins]

Environment

---

• Operating System: Linux
• Node Version: v18.14.2
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: -
• Package Manager: pnpm@8.6.12
• Builder: -
• User Config: devtools
• Runtime Modules: -
• Build Modules: -

---

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.

• 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)
• 22 sec - remove PrimeVue module (-2 seconds)
• 21 sec - remove FontAwesome (-1 second)
• 18 sec - remove Vue i18n module (-3 seconds)
• 17 sec - remove Nuxt Image & Vue Email modules (-1 second)
• 15 sec - remove timeline.enabled from Nuxt config (-2 seconds)
• 10 sec - remove all plugins (-5 seconds)
• 7 sec - remove typescript.typeCheck, strict from Nuxt config (-3 seconds)
• 3 sec - remove all components, composables, all files. (-4 seconds)
• 1 sec - remove all layers (-2 seconds)

The outline of my app (that's as much as I can share):

auth/	
common/	
jobs/	
offices/	
organizations/	
permissions/	
printing/	
products/	
services/	
settings/	
shipping-labels/	
shipping-profiles/	
user-groups/	
users/	
.env.example	
.eslintignore	
.eslintrc.json	
.gitignore	
.npmrc
app.vue	
codegen.yml
ecosystem.config.js	
graphql-env.d.ts	
nuxt.config.ts	
package.json	
pnpm-lock.yaml	
schema.graphql	
tsconfig.json

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

[danielroe]

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.

[martinszeltins]

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.

[lammerfalcon]

have the same problem - when the project growing - dev performance getting slower.
and the hmr getting slower too(