High CPU Usage with Nuxt Dev Server in Docker

[tmorgan497]

Environment

- Operating System: Windows_NT
- Node Version:     v20.10.0
- Nuxt Version:     -
- CLI Version:      3.12.0
- Nitro Version:    -
- Package Manager:  unknown
- Builder:          -
- User Config:      -
- Runtime Modules:  -
- Build Modules:    -

Reproduction

https://github.com/tmorgan497/minimal-nuxt-docker

Steps to reproduce:

# Clone the repo
git clone https://github.com/tmorgan497/minimal-nuxt-docker
cd minimal-nuxt-docker

# Run the docker stack
docker compose up

# Watch your CPU melt. Make sure you're wearing ear plugs when the CPU fans climb to 100%. Safety first

Describe the bug

This minimally viable app contains nuxt 3 and a few modules:

• tailwindcss
• primevue
• nuxt-icon
• pinia

When running this app in docker, the CPU usage is very high for what it should be (anywhere between 65% and 150%).

I may have narrowed it down to chokidar. When i comment out the environment variable CHOKIDAR_USEPOLLING=true, the CPU usage goes down to a normal level (under 1%). IIRC, chokidar is used for HMR, so I usually leave it active during development so I don't have to restart the container everytime I make a change. I added a watcher ignore param to my nuxt.config.ts, but it doesn't seem to do anything to help reduce the CPU usage.

  watchers: {
    webpack: {
      ignored: /node_modules/
    }
  },

Additional context

No response

Logs

No response

[tmorgan497]

When I set CHOKIDAR_USEPOLLING=false, the CPU load goes way down, but then I lose HMR. And when doing development on the app, that means I have to restart the container on every change. Does anyone have a workaround? Also, my container keeps outputting nitro-runtime logs, but I can't figure out from where. When I run the app outside of docker, no nitro-runtime logs occur. See logs below.

2024-06-14 13:02:42 Sorting candidates: 1.92ms
2024-06-14 13:02:42 Generate rules: 153.303ms
2024-06-14 13:02:42 Build stylesheet: 3.13ms
2024-06-14 13:02:42 Potential classes:  2618
2024-06-14 13:02:42 Active contexts:  2
2024-06-14 13:02:42 
2024-06-14 13:02:42 
2024-06-14 13:02:43 [nitro] rollup:before: 2.709s
2024-06-14 13:02:43 [nitro] types:extend: 0.019ms
2024-06-14 13:02:44 ℹ Vite client warmed up in 8616ms
2024-06-14 13:02:45 [nitro] ✔ Nuxt Nitro server built in 1391 ms
2024-06-14 13:02:45 [nitro] compiled: 0.536ms
2024-06-14 13:02:45 [nuxt] build:done: 6.517s
2024-06-14 13:02:45 ⚙ > Nitro Start (8ms)
2024-06-14 13:02:45 [nitro] dev:reload: 278.364ms
2024-06-14 13:02:47 [nitro-runtime] request: 0.66ms
2024-06-14 13:02:47 [nitro-runtime] render:html: 0.339ms
2024-06-14 13:02:47 [nitro-runtime] render:response: 0.021ms
2024-06-14 13:02:47 [nitro-runtime] beforeResponse: 0.023ms
2024-06-14 13:02:47 [nitro-runtime] dev:ssr-logs: 0.016ms
2024-06-14 13:02:47 [nitro-runtime] afterResponse: 0.788ms
2024-06-14 13:02:52 [nitro-runtime] request: 0.05ms
2024-06-14 13:02:52 [nitro-runtime] render:html: 0.425ms
2024-06-14 13:02:52 [nitro-runtime] render:response: 0.019ms
2024-06-14 13:02:52 [nitro-runtime] beforeResponse: 0.023ms
2024-06-14 13:02:52 [nitro-runtime] dev:ssr-logs: 0.009ms
2024-06-14 13:02:52 [nitro-runtime] afterResponse: 0.52ms
2024-06-14 13:02:57 [nitro-runtime] request: 0.064ms
2024-06-14 13:02:57 [nitro-runtime] render:html: 0.162ms
2024-06-14 13:02:57 [nitro-runtime] render:response: 0.025ms
2024-06-14 13:02:57 [nitro-runtime] beforeResponse: 0.016ms
2024-06-14 13:02:57 [nitro-runtime] dev:ssr-logs: 0.008ms
2024-06-14 13:02:57 [nitro-runtime] afterResponse: 0.385ms
2024-06-14 13:03:02 [nitro-runtime] request: 0.049ms
2024-06-14 13:03:02 [nitro-runtime] render:html: 0.162ms
2024-06-14 13:03:02 [nitro-runtime] render:response: 0.012ms
2024-06-14 13:03:02 [nitro-runtime] beforeResponse: 0.019ms
2024-06-14 13:03:02 [nitro-runtime] dev:ssr-logs: 0.01ms
2024-06-14 13:03:02 [nitro-runtime] afterResponse: 0.559ms
2024-06-14 13:03:07 [nitro-runtime] request: 0.066ms
2024-06-14 13:03:07 [nitro-runtime] render:html: 0.083ms
2024-06-14 13:03:07 [nitro-runtime] render:response: 0.013ms
2024-06-14 13:03:07 [nitro-runtime] beforeResponse: 0.011ms
2024-06-14 13:03:07 [nitro-runtime] dev:ssr-logs: 0.01ms
2024-06-14 13:03:07 [nitro-runtime] afterResponse: 0.367ms
2024-06-14 13:03:12 [nitro-runtime] request: 0.055ms
2024-06-14 13:03:12 [nitro-runtime] render:html: 0.074ms
2024-06-14 13:03:12 [nitro-runtime] render:response: 0.011ms
2024-06-14 13:03:12 [nitro-runtime] beforeResponse: 0.014ms
2024-06-14 13:03:12 [nitro-runtime] dev:ssr-logs: 0.011ms
2024-06-14 13:03:12 [nitro-runtime] afterResponse: 0.357ms
2024-06-14 13:03:17 [nitro-runtime] request: 0.071ms
2024-06-14 13:03:17 [nitro-runtime] render:html: 0.196ms
2024-06-14 13:03:17 [nitro-runtime] render:response: 0.014ms
2024-06-14 13:03:17 [nitro-runtime] beforeResponse: 0.025ms
2024-06-14 13:03:17 [nitro-runtime] dev:ssr-logs: 0.011ms
2024-06-14 13:03:17 [nitro-runtime] afterResponse: 0.82ms
2024-06-14 13:03:22 [nitro-runtime] request: 0.125ms
2024-06-14 13:03:22 [nitro-runtime] render:html: 0.154ms
2024-06-14 13:03:22 [nitro-runtime] render:response: 0.03ms
2024-06-14 13:03:22 [nitro-runtime] beforeResponse: 0.02ms
2024-06-14 13:03:22 [nitro-runtime] dev:ssr-logs: 0.016ms
2024-06-14 13:03:22 [nitro-runtime] afterResponse: 0.502ms

[danielroe]

Configuring watchers.webpack won't do anything unless you are using builder: 'webpack'.

You could try experimenting with experimental.watcher:

export default defineNuxtConfig({
  experimental: {
    watcher: 'chokidar' // or 'chokidar-granular' or 'parcel'
  },
})

[martinszeltins]

@tmorgan497 I tried your reproduction (with Docker) and HMR is working fine for me. Also, I am not seeing high CPU usage. But I am on Linux and I suspect that Windows might be causing the issue for you. Any chance you might develop on non-Windows OS (Linux, Mac)?

Also, I noticed that there is a directory called pv-presets in the root of your project which is causing unnecessary file watching and possibly another cause for the high CPU usage. There are a lot of directories with lots of files inside the pv-presets that I suspect are not needed (this is for PrimeVue, right)?

[tmorgan497]

I added the following to my nuxt.config.ts with no luck. Still high CPU usage.

  experimental: {
    watcher: 'chokidar',
    watchers: {
      chokidar: {
        usePolling: true,
        interval: 100,
        ignored: ['**/node_modules/**', '**/pv-presets/**']
      }
    }
  },

I also ran the container on a NixOS system and I'm not getting the same high CPU usage. So maybe it's a Windows thing 🤷. Even with CHOKIDAR_USEPOLLING=true with no explicitly excluded folders, at idle the container is using very little CPU. When I modify the app.vue and let HMR trigger, there's a tiny spike in the CPU, but then it goes back to idle on NixOS.