search

nuxt / nuxt

The Intuitive Vue Framework.
https://nuxt.com
MIT License
54.98k stars 5.03k forks source link

Nuxt extremely slow on initial request #20596

Closed kirkbushell closed 1 year ago

kirkbushell commented 1 year ago

Environment

Reproduction

Start a nuxt project, run npm run dev and then open the site in the browser, now go make a coffee.

Describe the bug

After running: npm run dev, and opening the site in the browser, that initial request takes 2-3 minutes. After that, refreshes are instant.

Additional context

No response

Logs

No response

warflash commented 1 year ago

I guess 2 minutes for really large projects on low performance machines is nothing unreasonable? Depends a lot on your exact setup and project so you might want to provide a reproduction project + specs if you feel like you're running into a bug of sorts. IIrc docker on mac os has some issues but that's not limited to nuxt, also https://github.com/nuxt/nuxt/pull/20179 is something you might want to check out as that PR specifically adresses dev startup performance

danielroe commented 1 year ago

Would you provide a reproduction? 🙏

kirkbushell commented 1 year ago

I guess 2 minutes for really large projects on low performance machines is nothing unreasonable? Depends a lot on your exact setup and project so you might want to provide a reproduction project + specs if you feel like you're running into a bug of sorts. IIrc docker on mac os has some issues but that's not limited to nuxt, also #20179 is something you might want to check out as that PR specifically adresses dev startup performance

Assuming I had a low-performance machine, sure.

I guess the question is WHY is it doing this?

I took a look at the PR, I don't think the watcher is the issue.

I've also tried disabling SSR, no improvement. Just what on earth is Nuxt doing on that initial request?

danielroe commented 1 year ago

A slower first request is typically due to vite performing on-demand transpilation of the assets needed to render a page. (This can be client-side, not just SSR.)

But 2-3 minutes is not expected behaviour. Which is one reason why I asked for a reproduction.

kirkbushell commented 1 year ago

@danielroe yeah fair enough. I don't see it on native vue apps, using vite, so not sure.

I'll setup a repro.

glennovische commented 1 year ago

Having the same issue, after building to our test env the first initial load is like SUPER slow....

danielroe commented 1 year ago

@glennovische Could you open a new issue with a reproduction? This issue is about dev server initial request performance.

warflash commented 1 year ago

@glennovische This issue in particular is for dev env slow initial requests. Things like vites initial transpilation don't apply to a built app. I'd probably recommend you open a new issue for built apps alongside a reproduction😊

damn daniel beat me to it :D

tobychidi commented 1 year ago

I just started experiencing this after pulling up a Nuxt3 version rc12 or something in a new " supposedly better" pc. I have now updated all dependencies but pnpm run dev takes minutes to run. Why could this be happening? to fix this issue I have restarted several times, deleted and reinstalled with node_modules no fix yet. My project is almost empty and I am still troubleshooting. Will start a fresh nuxt project and see if I have the same problem.

Current output:

Vite warmed up in : 32235ms Nitro built in 165784ms

image

🙆‍♂️

tobychidi commented 1 year ago

Oh. Wow. Brand new nuxt project

Nuxi 3.5.1                                                                                                                                                                                             14:26:06  
Nuxt 3.5.1 with Nitro 2.4.1                                                                                                                                                                            14:26:06
                                                                                                                                                                                                       14:26:12
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.73.17:3000/

ℹ Vite client warmed up in 16534ms                                                                                                                                                                     14:26:34  
✔ Nitro built in 105166 ms                                                                                                                                                                       nitro 14:28:08
✔ Vite server hmr 19 files in 3808.515ms

This is unexpected.

My Environment

danielroe commented 1 year ago

If you are hitting this on Windows it's a pretty painful regression from 3.5.1. You can set experimental.watcher to chokidar to resolve. That is likely a different issue from the one reported here.

The fact that you were experiencing this problem on an old project suggests that there is an issue in a dependency which has caused the regression.

tobychidi commented 1 year ago

Oh Wow. That was it. 😅

kirkbushell commented 1 year ago

Happening on mac as well.

dickofn commented 1 year ago

If you are hitting this on Windows it's a pretty painful regression from 3.5.1. You can set experimental.watcher to chokidar to resolve. That is likely a different issue from the one reported here.

The fact that you were experiencing this problem on an old project suggests that there is an issue in a dependency which has caused the regression.

how and where to set these settings @danielroe ?

tobychidi commented 1 year ago

If you are hitting this on Windows it's a pretty painful regression from 3.5.1. You can set experimental.watcher to chokidar to resolve. That is likely a different issue from the one reported here. The fact that you were experiencing this problem on an old project suggests that there is an issue in a dependency which has caused the regression.

how and where to set these settings @danielroe ?

In nuxt.config.ts like this

export default defineNuxtConfig({
   experimental: {
      watcher: "chokidar",
   },
})
dickofn commented 1 year ago

can confirm this fixes my slow start problem

export default defineNuxtConfig({
   experimental: {
      watcher: "chokidar",
   },
})
HugeLetters commented 1 year ago

+1 My start-up time on a fresh project went from 1+ minutes to ~5 seconds.

sonofmagic commented 1 year ago

After I add this config to nuxt.config.ts, Vite client warmed up still very very slow.

repo url: Atinux/content-wind/demo

Operating System: Win10 Node Version: v16.14.2 Nuxt Version: 3.5.1 Nitro Version: 2.4.1 Package Manager: pnpm@8.5.1 Builder: vite

image

nuxt.config.ts:

export default defineNuxtConfig({
  extends: 'content-wind',
  experimental: {
    watcher: "chokidar",
  },
})
kirkbushell commented 1 year ago

If you are hitting this on Windows it's a pretty painful regression from 3.5.1. You can set experimental.watcher to chokidar to resolve. That is likely a different issue from the one reported here.

The fact that you were experiencing this problem on an old project suggests that there is an issue in a dependency which has caused the regression.

Where do you define that? I set it up in the nuxt.config.ts as:

experimental: {
    watcher: 'chokidar'
},

And I still see 132 seconds to warm up nuxt server.

danielroe commented 1 year ago

@kirkbushell Nuxt v3.5.2 should no longer have the regression I described above (so no need to modify your config). There is an open PR that should resolve the original issue here but if you can provide a reproduction I can confirm that.

kirkbushell commented 1 year ago

@kirkbushell Nuxt v3.5.2 should no longer have the regression I described above (so no need to modify your config). There is an open PR that should resolve the original issue here but if you can provide a reproduction I can confirm that.

Yeah, I upgraded to 3.5.2, no change, unfortunately. Still takes 132 seconds to warm up.

kirkbushell commented 1 year ago

176s tonight. Even worse after the patch.

kirkbushell commented 1 year ago

Oh. This is coming to 3.5.3, not 3.5.2?

warflash commented 1 year ago

Yes. You can try opting into the edge channel to check and verify the PR daniel merged yesterday resolves your issue if you don't want to wait until 3.5.3. -> https://nuxt.com/docs/guide/going-further/edge-channel#opting-into-the-edge-channel

danielvodnansky commented 1 year ago

After the last upgrade to 3.5.3, I have this:

i Vite client warmed up in 575035ms √ Nitro built in 557532 ms

If I remove the bootstrap 5 library, it reduces a lot, but I cannot do this and I don't think the problem is there.

danielroe commented 1 year ago

@danielvodnansky Would you provide a reproduction? Are you using Windows? Note that there are two alternative watch implementations, and the one likely to be most performant on windows is experimental: { watcher: 'parcel' } which does require also installing @parcel/watcher and watchman.

kirkbushell commented 1 year ago

After the last upgrade to 3.5.3, I have this:

i Vite client warmed up in 575035ms √ Nitro built in 557532 ms

If I remove the bootstrap 5 library, it reduces a lot, but I cannot do this and I don't think the problem is there.

Oh wow... wth

kirkbushell commented 1 year ago

@danielvodnansky Would you provide a reproduction? Are you using Windows? Note that there are two alternative watch implementations, and the one likely to be most performant on windows is experimental: { watcher: 'parcel' } which does require also installing @parcel/watcher and watchman.

This isn't a win-only problem, though. Myself and others have reported similar issues on mac.

I did also upgrade to 3.5.3 with no change.

danielroe commented 1 year ago

The issue is that 'slowness' can come from several causes.

1) watcher initialisation. This is a problem particularly unique to windows due to how fs watching is handled in chokidar. And this was my interpretation of what was being reported. (incorrectly)

2) vite warmup or plugin transform issues - this is likely your issue. But I can't investigate without a reproduction.

The best thing at this point (given that this issue has been used to track the first issue) is to open a new issue with a reproduction so we can investigate. 🙏

danielvodnansky commented 1 year ago

es, I use windows.

Nuxt config file: code

Package.json code2

danielroe commented 1 year ago

Note that to benefit from the speedup in the latest release you need to ensure you have not overridden the value of experimental.watcher.

You can also try using the parcel watcher. (Install @parcel/watcher and then follow steps to install Watchman.)

If you are encountering an issue associated - with CSS, note we are currently tracking an issue associated with vite and scss.

CharlesBT commented 1 year ago

It doesn't seems to be solved on 3.5.3 same starting time as previous versions on windows

davidivkovic commented 1 year ago

Same issue here on a fresh windows project. No libraries or anything. Nuxt warmup takes 36 seconds.

RomanSkrypnik commented 1 year ago

Same. It takes quite enough time to build my project...

├─ /api/_content/cache.1689611793221.json (106544ms) nitro 7:40:12 PM ├─ /es/sitemap.xml (109180ms) nitro 7:40:14 PM ├─ /sitemap.xml (110086ms)

image image
kirkbushell commented 1 year ago

I've moved on from nuxt, because of this problem - it is so frustrating and wastes so much time when you have to restart the server.

Real shame.

ks-neerajn commented 1 year ago

Is any update on load speed of nuxt 3, because I faced this issue one week back, @danielroe?

earl-grey-guy commented 1 year ago

This worked for me (as suggested above). My windows build is down from 20s to 2s

export default defineNuxtConfig({
  ...(other stuff),
  experimental: {
    watcher: 'parcel'
  }
})
stephansteiner commented 1 year ago

Is this issue really fixed by https://github.com/nuxt/nuxt/pull/21256? According to the release notes, the fix was contained in version v3.5.3. I'm running 3.6.5 on windows and startup time is way over 30 seconds: ℹ Vite client warmed up in 34854ms
✔ Nitro built in 22867 ms
plus extra 30 seconds to load the initial vue layout (with just a simple button on it). That's a total of 1 min 30 seconds for the startup.

Unfortunately, the solution proposed by earl-grey-guy (https://github.com/nuxt/nuxt/issues/20596#issuecomment-1673680818) is not a viable option for us as it requires python as well as visual studio to be installed.

danielroe commented 1 year ago

@stephansteiner Are you using layers, or a monorepo? Would you test on the edge channel?

earl-grey-guy commented 1 year ago

@stephansteiner I don't think my solution requires either python or visual studio.

stephansteiner commented 1 year ago

@stephansteiner I don't think my solution requires either python or visual studio.

I'm having this issue when installing @parcel/watcher: https://github.com/parcel-bundler/parcel/issues/8152: apparently, when running windows both python and visual studio are required as it is used with node-gyp

earl-grey-guy commented 1 year ago

@stephansteiner All I can say is I didn't have that problem when I installed @parcel/watcher. I think the obstacle you're hitting is not nuxt-related at this point. I am sorry you're dealing with it, of course. Node + windows has never been easy mode unfortunately. It's a lot better than it was years ago, but it still kinda sucks.

adiramardiani commented 1 year ago

Is any update on this issue ? Btw my development experience is so bad, I dont know this related to nuxt content, tailwind, or any other thing But currently my startup time is CRAZY slow, any one experience the same thing again ? My env is WSL try chokidar, parcel and is same :(

image

Just wait 3 minute for nitro built :(

danielroe commented 1 year ago

@adiramardiani Would you open a new issue with a reproduction? 🙏 This is really not okay and we want to resolve it for you.

pi0 commented 1 year ago

It is likely that in windows something is being wrongly bundling in dev mode. Reproduction would greatly help to resolve relevant issues 🙏

khalidzamer commented 1 year ago

I have a similar issue, in dev mode, the app loads , but it takes another minute or so in the browser to load color mode switcher in the header and for Pinia to become available, meanwhile, some components are available on the page but not interactive I suspect it has to do with anything ClientOnly or Pinia in a project, even if the project is a simple page with a simple layout it is frustrating I hope the issue is analyzed ,

In build mode it does not have this problem

danielroe commented 1 year ago

@khalidzamer We can investigate if you are able to provide a reproduction.

khalidzamer commented 1 year ago

@danielroe , my hero, while I was establishing a new repo that I can share publicly, I tried adding the same packages and configs gradually.. I might have discovered what is causing the issue on my side,

I so far suspect the issue is using localhost vs 127.0.0.1 in the browser has an obvious impact,

localhost takes longer to load the color mode switcher, which is loaded a bit delayed after the header, while with 127.0.0.1 the difference is reduced drastically,

I tried it in my original working app and the reload time difference is massive and the pain is gone!

Speaking of localhost vs. 127.0.0.1 vs 0.0.0.0 , I also notice impact in /server/api requests as well which might behave differently when local vs when deployed, what is your recommendation?

pi0 commented 1 year ago

@khalidzamer Can you check nuxi --version? If it is latest (3.8.3) for windows and WSL it should use 127.0.0.1 by default.

khalidzamer commented 1 year ago

@pi0 yes Pooya , that's when I noticed the change in default behavior and suspected something is wrong, although I had this slow behavior last week in previous version, thank you for your efforts