Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Having issues with slow responses with nuxi dev #209

Open
pi0 opened this issue Sep 20, 2023 · 22 comments
Open

Having issues with slow responses with nuxi dev #209

pi0 opened this issue Sep 20, 2023 · 22 comments

Comments

@pi0
Copy link
Member

pi0 commented Sep 20, 2023

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 unjs/listhen#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
Copy link

or2e commented Sep 20, 2023

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
Copy link
Member Author

pi0 commented Sep 21, 2023

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
Copy link

blowsie commented Sep 21, 2023

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
Copy link
Member

manniL commented Sep 21, 2023

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

@blowsie
Copy link

blowsie commented Sep 21, 2023

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
Copy link


  • Operating System: Linux
  • Node Version: v18.17.1
  • Nuxt Version: 3.7.3
  • CLI Version: 3.9.0
  • Nitro Version: 2.6.3
  • Package Manager: pnpm@8.7.6
  • Builder: -
  • User Config: ssr, app, experimental, srcDir, typescript, css, imports, components, modules, auth, monacoEditor, pinia, pwa, eslint, devtools, quasar, runtimeConfig, vite
  • Runtime Modules: nuxt-quasar-ui@2.0.5, @sidebase/nuxt-auth@0.6.0-beta.5, nuxt-lodash@2.5.0, @vueuse/nuxt@10.4.1, nuxt-monaco-editor@1.2.3, @pinia/nuxt@0.4.11, @nuxt/devtools@0.8.4, @/server/worker/module, @/server/grafserv/module, @/server/auth/module, @vite-pwa/nuxt@0.1.1
  • Build Modules: -

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... 😒

@pi0
Copy link
Member Author

pi0 commented Sep 21, 2023

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

This comment was marked as off-topic.

@pi0

This comment was marked as off-topic.

@vladimir-pankov
Copy link

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
Copy link
Member Author

pi0 commented Sep 21, 2023

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

@vladimir-pankov
Copy link

vladimir-pankov commented Sep 21, 2023


  • Operating System: Linux
  • Node Version: v18.5.0
  • Nuxt Version: 3.7.3
  • CLI Version: 3.9.0
  • Nitro Version: 2.6.3
  • Package Manager: yarn@1.22.19
  • Builder: -
  • User Config: srcDir, target, ssr, debug, typescript, runtimeConfig, sitemap, app, imports, css, build, modules, extends, head, content, experimental, vite, nitro, hooks
  • Runtime Modules: @vueuse/nuxt@9.13.0, @pinia/nuxt@0.4.11, @nuxt/content@2.8.2, ()
  • Build Modules: -

I do not know dependencies but nitro prints big execution time:

[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
Copy link

luke-z commented Sep 22, 2023

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
Copy link

@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
Copy link

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
Copy link

renanjoppert1 commented Sep 27, 2023

Same here, but in Windows don't use WSL

  • Operating System: Windows_NT
  • Node Version: v18.16.1
  • Nuxt Version: 3.7.3
  • CLI Version: 3.9.0
  • Nitro Version: 2.6.3
  • Package Manager: yarn@1.22.19
  • Builder: -
  • User Config: ssr, devtools, imports, app, components, css, modules, ui, googleFonts, postcss, build, runtimeConfig, pinia, nitro, vite
  • Runtime Modules: @pinia/nuxt@0.4.11, @pinia-plugin-persistedstate/nuxt@1.1.1, @nuxtjs/google-fonts@3.0.2, @nuxt/ui@2.8.1
  • Build Modules: -

@ManasMadrecha
Copy link

ManasMadrecha commented Oct 3, 2023

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
// 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
/** @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

@Aurion72
Copy link

Aurion72 commented Oct 9, 2023

@pi0 Anything new on this issue ? :)

@leo-buneev
Copy link

leo-buneev commented Oct 10, 2023

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
Copy link

I am having massive performance issues (nuxt/nuxt#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
Copy link

fabis94 commented Nov 29, 2023

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
Copy link
Contributor

L422Y commented May 6, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests