cli: Having issues with slow responses with `nuxi dev`

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:    -
------------------------------

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

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

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

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

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: -

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

• 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)

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.

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

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

# 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: 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

Distributor ID: Ubuntu
Description:    Ubuntu 22.04.3 LTS
Release:        22.04
Codename:       jammy

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

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

Distributor ID: Debian
Description:    Debian GNU/Linux 11 (bullseye)
Release:        11
Codename:       bullseye

------------------------------
- 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: -
------------------------------