nuxt/nuxt

Degraded dev server startup time as project grows in size

Open

#27.106 geöffnet am 8. Mai 2024

Auf GitHub ansehen
 (19 Kommentare) (13 Reaktionen) (0 zugewiesene Personen)TypeScript (60.221 Stars) (5.607 Forks)batch import
good first issueupstream⚡ performance

Beschreibung

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

Contributor Guide