search

nuxt / cli

⚡️ Nuxt Generation CLI Experience.
https://github.com/nuxt/cli/discussions/3
MIT License
272 stars 67 forks source link

Having issues with slow responses with `nuxi dev` #209

Open pi0 opened 1 year ago

pi0 commented 1 year ago

Starting with the 3.7.0 release of the nuxi CLI, we added a security fix to prevent exposing the dev server port to the local-area network by default, limiting its access to your computer only.

Initially, using 127.0.0.1 as a localhost IP address tended to work fine on MacOS and Linux operating systems. However, we soon received bug reports indicating that it caused slower builds on Windows, Docker, and WSL2. The reason is that localhost can be resolved to either 127.0.0.1 (IPv4) or ::1 (IPv6), and on some operating systems, they first attempt to use IPv6 (::1) each time. This behavior was not available, and a timeout occurred before falling back to 127.0.0.1, causing slow build issues.

In the latest release of nuxi 3.9 and unjs/listhen via https://github.com/unjs/listhen/pull/126, we have adjusted the defaults to better support Windows, WSL2, and Docker. At least in my homelab Windows VM, it now shows fast builds again when using the default nuxi host and opening it in http://localhost:3000.

If you were previously using any workarounds involving the --host argument or HOST environment variable, please consider removing them and trying again.

You can update to the latest version of nuxi by using nuxi upgrade, or you can try it with npx nuxi@latest dev or bun x nuxi@latest dev. You can ensure you have the latest version by using the nuxi info or nuxi --version commands.

If you continue to experience slow build issues, they may have different causes. In this case, further investigation is necessary.

Please report the issue in this thread along with the full output of the nuxi info command, including your local host information. Also, mention if you are using WSL2 or any custom setup.

or2e commented 1 year ago

Hi @pi0 the problem keeps reproducing, just in case I reinstalled win and wsl )

Win hosts ``` # Added by Docker Desktop 192.168.1.65 host.docker.internal 192.168.1.65 gateway.docker.internal # To allow the same kube context to work on the host and the container: 127.0.0.1 kubernetes.docker.internal # End of section ```
wsl --version ``` WSL version: 2.0.0.0 Kernel version: 5.15.123.1-1 WSLg Version: 1.0.57 MSRDC Version: 1.2.4485 Direct3D Version: 1.608.2-61064218 DXCore Version: 10.0.25880.1000-230602-1350.main Windows Version: 10.0.22621.2283 ```

No C:\Users\<UserName>\.wslconfig

WSL2 lsb_release -a ``` Distributor ID: Ubuntu Description: Ubuntu 22.04.3 LTS Release: 22.04 Codename: jammy ```
WSL2 etc/hosts ``` 127.0.0.1 localhost 127.0.1.1 DESKTOP-***. DESKTOP-*** 192.168.1.65 host.docker.internal 192.168.1.65 gateway.docker.internal 127.0.0.1 kubernetes.docker.internal # The following lines are desirable for IPv6 capable hosts ::1 ip6-localhost ip6-loopback fe00::0 ip6-localnet ff00::0 ip6-mcastprefix ff02::1 ip6-allnodes ff02::2 ip6-allrouters ```
VS Code ``` Version: 1.82.2 (user setup) Commit: abd2f3db4bdb28f9e95536dfa84d8479f1eb312d Date: 2023-09-14T05:55:25.390Z Electron: 25.8.1 ElectronBuildId: 23779380 Chromium: 114.0.5735.289 Node.js: 18.15.0 V8: 11.4.183.29-electron.0 OS: Windows_NT x64 10.0.22621 ```
VS Code .devcontainer lsb_release -a ``` Distributor ID: Debian Description: Debian GNU/Linux 11 (bullseye) Release: 11 Codename: bullseye ```
npx nuxi info ``` ------------------------------ - Operating System: Linux - Node Version: v18.18.0 - Nuxt Version: 3.7.3 - CLI Version: 3.9.0 - Nitro Version: 2.6.3 - Package Manager: pnpm@8.7.6 - Builder: - - User Config: - - Runtime Modules: - - Build Modules: - ------------------------------ ```
pi0 commented 1 year ago

Thanks for info @or2e. Are you available for a quick call so i can check your project ? (You can reach me out both via discord and pooya@pi0.io)

Also, is it slow if you use nuxi dev --no-fork?

blowsie commented 1 year ago

Hey @pi0,

My small website is now taking 10~mins to build.

------------------------------
- Operating System: Windows_NT
- Node Version:     v20.7.0
- Nuxt Version:     3.7.3
- CLI Version:      3.8.4
- Nitro Version:    2.6.3
- Package Manager:  pnpm@8.6.2
- Builder:          -
- User Config:      runtimeConfig, experimental, modules, pinia, eslint, imports, components, tailwindcss, css, app, devtools, build
- Runtime Modules:  @oen.web.vue/ui/nuxt@1.5.0, @nuxtjs/tailwindcss@6.8.0, @pinia/nuxt@0.4.11, 
@pinia-plugin-persistedstate/nuxt@1.1.2, @nuxt/content@2.8.2, @vueuse/nuxt@10.4.1, ./nuxt-webshop-api/src/module
- Build Modules:    -
------------------------------

I'm happy to provide more information here if you need it. Alternatively, we can chat in discord if it helps. My handle blowsie.dev

manniL commented 1 year ago

@blowsie first you might want to upgrade your CLI to 3.9.x

blowsie commented 1 year ago

Thanks @manniL, I get the same results with 3.9

------------------------------
- Operating System: Windows_NT
- Node Version:     v20.3.0
- Nuxt Version:     3.7.3
- CLI Version:      3.9.0
- Nitro Version:    2.6.3
- Package Manager:  pnpm@8.6.2
- Builder:          -
- User Config:      modules, pinia, eslint, imports, components, tailwindcss, css, app, devtools, build, routeRules
- Runtime Modules:  @oen.web.vue/ui/nuxt@1.5.0, @nuxtjs/tailwindcss@6.8.0, @pinia/nuxt@0.4.11, @pinia-plugin-persistedstate/nuxt@1.1.2, @nuxt/content@2.8.2, @vueuse/nuxt@10.4.1
- Build Modules:    -
------------------------------

nuxt dev

Nuxt 3.7.3 with Nitro 2.6.3 13:01:33 13:01:36 ➜ Local: http://localhost:3000/ ➜ Network: use --host to expose

i Using default Tailwind CSS file nuxt:tailwindcss 13:01:51 √ Nuxt DevTools is enabled v0.8.4 (experimental) 13:02:01

WARN Slow module @nuxt/devtools took 7926.15ms to setup. 13:02:01

i Tailwind Viewer: http://localhost:3000/_tailwind/ nuxt:tailwindcss 13:02:02 i ✨ optimized dependencies changed. reloading 13:03:26 i Vite client warmed up in 110871ms 13:03:58 √ Nitro built in 162235 ms

Dodobibi commented 1 year ago

After upgrading CLI to 3.9.0, slower is resolved for me (on WSL2), but it break my implementation of websocket. an issue solved by bringing 3 more... :unamused:

pi0 commented 1 year ago

Thanks to more info @stafyniaksacha, there seems to be ~10% overhead in WSL environments from proxy. Meanwhile working on a fix (to use direct IPX Sockets), you might try with nuxi dev --no-fork.

@Dodobibi Sorry to hear that. Currently, we do not have any official way of registering WebSockets but this example might be helpful (and works with all versions of CLI listen hook. Feel free to open an issue with your current code if can't make it would be happy to help.

Dodobibi commented 1 year ago

@pi0, thanks, but this example is bad for me, because in your example, the websocket server is running in a build context, when it should be running in an execution context (not on the same worker ). To do this, I create a ws server into a nuxtNitroPlugin, and a proxy in a module. It's broken now. I'm looking forward to a real official websocket implementation.

pi0 commented 1 year ago

@Dodobibi If it was working before, it shouldn't be broken. So feel free to open issue in meanwhile (marking our messages as off-topic here)

vladimir-pankov commented 1 year ago

No any progress. Old version: Nuxi 3.6.5 Nuxt 3.6.5 with Nitro 2.6.0 Done in 426.59s.

Still slow new version: Nuxt 3.7.3 with Nitro 2.6.3 Done in 3661.96s.

The same data, the same site.

pi0 commented 1 year ago

@vladimir-pankov can you please share nuxi info output? 🙏🏼

vladimir-pankov commented 1 year ago

[nitro] ├─ /api/_content/query/k9iRHwiJVs.1695315995949.json (9468ms) [nitro] ├─ /api/_content/query/465KpVz6lY.1695315995949.json (9469ms) [nitro] ├─ /api/_content/query/B8SbwC8dv3.1695315995949.json (9243ms) [nitro] ├─ /api/_content/query/LXc88yZOr0.1695315995949.json (8346ms) [nitro] ├─ /api/_content/query/zPiQGDJdIf.1695315995949.json (8345ms) [nitro] ├─ /api/_content/query/rxDcFyI10a.1695315995949.json (8346ms)

in comparison to old version: [nitro] ├─ /api/_content/query/tF9pmSdcSG.1695310283789.json (216ms) [nitro] ├─ /api/_content/query/NBBzC05jLl.1695310283789.json (204ms) [nitro] ├─ /api/_content/query/W0UzeWBvuu.1695310283789.json (203ms) [nitro] ├─ /api/_content/query/Gg6BrmZ1bO.1695310283789.json (232ms) [nitro] ├─ /api/_content/query/UHnxKwnROu.1695310283789.json (213ms) [nitro] ├─ /api/_content/query/h2C4aJKlkf.1695310283789.json (213ms)

luke-z commented 1 year ago

The fixes in CLI verison 3.9.0 solved the problem for me.

For new projects it works immediately (npx nuxi@latest init my-app)

My previous project, which I had to run with nuxt dev --host, worked after running yarn nuxi upgrade --force I also tried just removing node_modules/ and yarn.lock, which did the trick as well.

So the slow loading is resolved for me.

@vladimir_pankov make sure to remove yarn.lock in your project, as nuxi is also cached there and run a fresh yarn install to get cli version 3.9.0 in your project

vladimir-pankov commented 1 year ago

@luke-z That was i did to meet this problem ( removing yarn.lock ) I've tested with cli version 3.9.0 and no progress ( still slow ). My project uses SSG mode and so generation repeats for each route ( 2665 times ) I guess that dev or init modes do not suit my case.

Javid-Izadfar commented 1 year ago

same here with CLI version 3.9.0

------------------------------
- Operating System: Linux
- Node Version:     v18.15.0
- Nuxt Version:     3.7.0
- CLI Version:      3.9.0
- Nitro Version:    2.6.3
- Package Manager:  pnpm@8.1.1
- Builder:          -
- User Config:      app, vite, hooks, css, components, modules, pinia, viewport
- Runtime Modules:  @pinia/nuxt@0.4.6, @nuxtjs/tailwindcss@6.3.1, @nuxt/image-edge@1.0.0-27954023.4cee565, @vueuse/nuxt@10.4.1, @pinia/nuxt@0.4.6, nuxt-viewport@2.0.3, vue-types-nuxt@1.0.0, @pinia-plugin-persistedstate/nuxt@1.1.1
- Build Modules:    -
------------------------------
renanjoppert1 commented 1 year ago

Same here, but in Windows don't use WSL

ManasMadrecha commented 1 year ago

nuxi dev (even with 3.9.0 version) on Windows 11 and Nodejs 20+ is starting the app very slowly.

Here are the timestamps:

$ nuxi dev
Nuxt 3.7.4 with Nitro 2.6.3                                                                             11:04:29 pm
                                                                                                        11:04:31 pm
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

ℹ Compiled templates.pwa.client.28cc0ab3.ts in 6876.59ms                                               11:05:24 pm
ℹ Compiled routes.mjs in 7994.6ms                                                                      11:05:25 pm
ℹ Compiled types/imports.d.ts in 8388.91ms                                                             11:05:25 pm
ℹ Compiled plugins/server.mjs in 11460.16ms                                                            11:05:28 pm
ℹ Compiled plugins/client.mjs in 11774.8ms                                                             11:05:28 pm
ℹ Vite client warmed up in 146844ms                                                                    11:08:14 pm
✔ Nitro built in 192071 ms                                                                       nitro 11:11:12 pm

Here is the nuxi info:

------------------------------
- Operating System: Windows_NT
- Node Version:     v20.8.0
- Nuxt Version:     3.7.4
- CLI Version:      3.9.0
- Nitro Version:    2.6.3
- Package Manager:  npm@10.1.0
- Builder:          -
- User Config:      css, devtools, experimental, nitro, modules, postcss, pwa, routeRules, runtimeConfig
- Runtime Modules:  @vueuse/nuxt@10.4.1, @bg-dev/nuxt-naiveui@1.4.7, @pinia/nuxt@0.4.11, @pinia-plugin-persistedstate/nuxt@1.1.2, @vite-pwa/nuxt@0.1.1
- Build Modules:    -
------------------------------

Nuxt config

Here is my nuxt config file ```ts // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ css: [ '~/assets/style/main.css', ], devtools: { enabled: false /* process.dev */ }, experimental: { // writeEarlyHints: false, }, nitro: { experimental: { asyncContext: true }, preset: 'firebase', firebase: { gen: 2, httpsOptions: { region: 'asia-south1', maxInstances: 2, }, }, }, modules: [ '@vueuse/nuxt', '@bg-dev/nuxt-naiveui', '@pinia/nuxt', '@pinia-plugin-persistedstate/nuxt', '@vite-pwa/nuxt', ], postcss: { plugins: { 'postcss-import': {}, 'tailwindcss/nesting': {}, tailwindcss: {}, autoprefixer: {}, }, }, pwa: { registerType: 'autoUpdate', manifest: { name: '... ...', short_name: '...', theme_color: '#ffffff', icons: [/* ... */], start_url: '/start', }, workbox: { navigateFallback: '/', globPatterns: ['**/*.{js,css,html,png,svg,ico}'], }, client: { installPrompt: true, // you don't need to include this: only for testing purposes // if enabling periodic sync for update use 1 hour or so (periodicSyncForUpdates: 3600) // periodicSyncForUpdates: 20, }, devOptions: { enabled: true, // suppressWarnings: true, navigateFallbackAllowlist: [/^\/$/], type: 'module', }, }, routeRules: { '/': { swr: 3600 * 2 }, '/about/**': { static: true }, '/api/**': { cors: true }, '/blog/**': { static: true }, '/legal/**': { static: true }, '/pricing/**': { static: true }, '/research/**': { swr: 3600 * 15 }, '/settings/**': { swr: 3600 * 15 }, '/support/**': { static: true }, }, runtimeConfig: { public: { naiveui: { colorModePreference: 'dark', } } } }) ```

Tailwind config

And here is my tailwind config file ```js /** @type {import('tailwindcss').Config} */ const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons") module.exports = { content: [ "./app.vue", "./components/**/*.{js,vue,ts}", "./content/**/*.{js,vue,ts,md,yaml,json}", "./modules/**/*.{js,ts}", "./layouts/**/*.vue", "./pages/**/*.vue", "./plugins/**/*.{js,ts}", "./app.config.{js,ts}", "./nuxt.config.{js,ts}", ], darkMode: 'class', theme: { extend: {}, }, plugins: [ iconsPlugin({ collections: getIconCollections(["mdi", "lucide", "solar", "heroicons", "twemoji"]), }), ] } ```

Edit: Removing modules (except pwa)

With this in nuxt config

modules: [
    // '@vueuse/nuxt',
    // '@bg-dev/nuxt-naiveui',
    // '@pinia/nuxt',
    // '@pinia-plugin-persistedstate/nuxt',
    '@vite-pwa/nuxt',
  ],

Still, the timestamps hardly show any improvement

$ nuxi dev
Nuxt 3.7.4 with Nitro 2.6.3                                                                             11:28:44 pm
                                                                                                        11:28:45 pm
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

✔ Nitro built in 23524 ms                                                                        nitro 11:30:32 pm
ℹ Vite client warmed up in 120897ms                                                                    11:30:57 pm

Edit: Cleaning the entire nuxt config file

Nuxt config file:

export default defineNuxtConfig({})

The timestamps improved, but still, aren't they quite high?

$ nuxi dev
Nuxt 3.7.4 with Nitro 2.6.3                                                                             11:35:54 pm
                                                                                                        11:35:55 pm
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

ℹ Vite client warmed up in 74802ms                                                                     11:37:16 pm
✔ Nitro built in 19298 ms                                                                        nitro 11:37:21 pm

Keeping the nuxt config file clean, I downgraded the Nuxt to 3.7.1 and Nitropack to 2.6.2. Here are the improved timestamps:

$ nuxi dev
Nuxt 3.7.1 with Nitro 2.6.2                                                                             12:13:03 am
                                                                                                        12:13:04 am
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

ℹ Vite client warmed up in 62607ms                                                                     12:14:14 am
✔ Nitro built in 16830 ms                                                                        nitro 12:14:19 am
TonyFresneau commented 1 year ago

@pi0 Anything new on this issue ? :)

leo-buneev commented 1 year ago

Thanks for investigation!

For me, build times are always fast (using ssr: true) however, downloading files (js/css/vue) is very slow on localhost without --host (which is default setup).

without --host: localhost: 300ms/file (>1minute page refresh in total for not-so-big project) 127.0.0.1: 10ms/file

with --host: localhost: 10ms/file 127.0.0.1: 10ms/file

------------------------------
- Operating System: Windows_NT
- Node Version:     v18.9.0
- Nuxt Version:     3.7.4
- CLI Version:      3.9.0
- Nitro Version:    2.6.3
- Package Manager:  pnpm@8.6.5
- Builder:          -
- User Config:      ssr, srcDir, serverDir, modules, routeRules, pwa, spaLoadingTemplate, app, nitro, imports, css, vite, hooks
- Runtime Modules:  nuxt-vitest@0.7.1, @vite-pwa/nuxt@0.1.1, ()
- Build Modules:    -
------------------------------
TimGuendel commented 1 year ago

I am having massive performance issues (https://github.com/nuxt/nuxt/issues/23504) - what is the trick with --host? 🤔

------------------------------
- Operating System: Windows_NT
- Node Version:     v18.17.1
- Nuxt Version:     3.7.4
- CLI Version:      3.9.0
- Nitro Version:    2.6.3
- Package Manager:  yarn@1.22.19
- Builder:          -
- User Config:      telemetry, devtools, components, app, nitro, vite, css, modules, proxy, runtimeConfig
- Runtime Modules:  @vueuse/nuxt@10.4.1, @pinia/nuxt@0.4.11, nuxt-jsonld@2.0.8, @nuxt-alt/proxy@2.3.2
- Build Modules:    -
------------------------------
fabis94 commented 1 year ago

There are scenarios when its not possible to remove the custom HOST env var. I'm in a project that has a fairly custom local dev env involving local kubernetes, and for that to work on WSL2, HOST must be set to 127.0.0.1.

Are there any plans to resolve the issue so that there's no slowdown even with a custom HOST set?

L422Y commented 7 months ago

We are experiencing this with WSL2, does not happen on macOS, setting devServer.host to anything besides null triggers the slow loading behavior.

We require the ability to bind to 0.0.0.0 for testing on other devices on the network, so not setting this is not an option.

Currently, we're using an env variable to set the host, but it's not ideal as this still means WSL systems are not able to debug over the network - just that we don't need to modify the nuxt config and can override the host for macOS devs and testing over the network