Nuxt locale development loading 15 seconds since using Nuxt UI-Pro
Hello everyone,
I'm experiencing a very slow page load time in my local Nuxt.js development environment. Every time I reload or navigate, it takes about 15 seconds for the page to load.
Looking at my browser's network tab, I can see that the dev server is fetching a large number of individual files directly from my node_modules folder, specifically from @nuxt/ui and reka-ui.
For example, I see requests like these:
http://localhost:3000/_nuxt/@fs/C:/Users/pscha/Desktop/Stride/stride/node_modules/reka-ui/dist/Listbox/ListboxContent.js
http://localhost:3000/_nuxt/@fs/C:/Users/pscha/Desktop/Stride/stride/node_modules/@nuxt/ui/dist/runtime/components/Calendar.vue
This seems to be causing the performance bottleneck. I've been using @nuxt/ui and my nuxt.config.ts is quite minimal.
Has anyone encountered a similar issue with Nuxt and these UI libraries? I'm looking for advice on how to get the dev server to properly optimize or pre-bundle these dependencies.
Thanks in advance for any help!
3 Replies
Hi @๐
๐ถ๐๐ธ๐ถ๐ โ. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Your experience of slow local development with Nuxt and Nuxt UI Proโwhere the dev server fetches many files directly from node_modules, especially from @nuxt/ui and reka-uiโis a known pain point, particularly on Windows systems.
Key Points from the Knowledge Sources
1. Windows Performance Issues
There is a documented issue where Hot Module Replacement (HMR) and general dev server performance on Windows can be extremely slow, sometimes taking 20โ30 seconds or more for reloads. The recommended solution is to use WSL (Windows Subsystem for Linux) with a Linux distribution like Ubuntu. This setup can reduce reload times to under a second and avoid multiple restarts, providing a much smoother development experience. This is especially relevant if you see the dev server fetching many files from node_modules, as file system performance on Windows can be a bottleneck for Vite and Nuxt's dev server when working with many small files, as is common with modern UI libraries like Nuxt UI Pro and Reka UIย docs: improve HMR performance note for Windows users. 2. Vite and Dependency Pre-bundling
While your question specifically asks about pre-bundling or optimizing these dependencies, the knowledge sources do not provide explicit steps for customizing Vite's dependency optimization in Nuxt 4. However, the observed behavior (many requests to node_modules) is typical when dependencies are not pre-bundled or optimized, which can be exacerbated by Windows file system performance. 3. General Performance Best Practices
The Nuxt documentation highlights that overusing plugins, unused code, and not following Vue performance tips can degrade performance, but your minimal config suggests this is not the main issue. The core bottleneck appears to be the dev server's handling of dependencies and file system accessย Nuxt performance: common problems. Recommendations - If you are on Windows:
Switch to developing with WSL + Ubuntu. This is the most effective way to resolve slow dev server reloads and excessive file requests, as confirmed by Nuxt maintainersย docs: improve HMR performance note for Windows users. - If you are not on Windows or still have issues:
The knowledge sources do not provide a direct solution for customizing Vite's dependency optimization in Nuxt 4, nor do they mention a specific fix for the pre-bundling of @nuxt/ui or reka-ui. If the problem persists, consider opening an issue on the Nuxt or Nuxt UI repositories with detailed reproduction steps. - Keep your dependencies up to date:
Sometimes, performance regressions are fixed in newer versions of Nuxt, Nuxt UI, or related tooling. Make sure you are using the latest versions. Summary Your issue is most likely related to the known performance limitations of the Windows file system when used with Vite-based dev servers. Using WSL is the recommended and proven solution. If you are already using WSL or are on another OS, and the problem persists, the knowledge sources do not provide a direct fix for dependency pre-bundling in this context. If you need further help, please provide your OS details and Nuxt version, or consider reaching out to the Nuxt community with a minimal reproduction. --- References integrated above as per instructions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
There is a documented issue where Hot Module Replacement (HMR) and general dev server performance on Windows can be extremely slow, sometimes taking 20โ30 seconds or more for reloads. The recommended solution is to use WSL (Windows Subsystem for Linux) with a Linux distribution like Ubuntu. This setup can reduce reload times to under a second and avoid multiple restarts, providing a much smoother development experience. This is especially relevant if you see the dev server fetching many files from node_modules, as file system performance on Windows can be a bottleneck for Vite and Nuxt's dev server when working with many small files, as is common with modern UI libraries like Nuxt UI Pro and Reka UIย docs: improve HMR performance note for Windows users. 2. Vite and Dependency Pre-bundling
While your question specifically asks about pre-bundling or optimizing these dependencies, the knowledge sources do not provide explicit steps for customizing Vite's dependency optimization in Nuxt 4. However, the observed behavior (many requests to node_modules) is typical when dependencies are not pre-bundled or optimized, which can be exacerbated by Windows file system performance. 3. General Performance Best Practices
The Nuxt documentation highlights that overusing plugins, unused code, and not following Vue performance tips can degrade performance, but your minimal config suggests this is not the main issue. The core bottleneck appears to be the dev server's handling of dependencies and file system accessย Nuxt performance: common problems. Recommendations - If you are on Windows:
Switch to developing with WSL + Ubuntu. This is the most effective way to resolve slow dev server reloads and excessive file requests, as confirmed by Nuxt maintainersย docs: improve HMR performance note for Windows users. - If you are not on Windows or still have issues:
The knowledge sources do not provide a direct solution for customizing Vite's dependency optimization in Nuxt 4, nor do they mention a specific fix for the pre-bundling of @nuxt/ui or reka-ui. If the problem persists, consider opening an issue on the Nuxt or Nuxt UI repositories with detailed reproduction steps. - Keep your dependencies up to date:
Sometimes, performance regressions are fixed in newer versions of Nuxt, Nuxt UI, or related tooling. Make sure you are using the latest versions. Summary Your issue is most likely related to the known performance limitations of the Windows file system when used with Vite-based dev servers. Using WSL is the recommended and proven solution. If you are already using WSL or are on another OS, and the problem persists, the knowledge sources do not provide a direct fix for dependency pre-bundling in this context. If you need further help, please provide your OS details and Nuxt version, or consider reaching out to the Nuxt community with a minimal reproduction. --- References integrated above as per instructions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@543415633824448512> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Workaround for now is using 127.0.0.1:3000 instead of localhost but times are still awfull
But still doing over 1000 request just for my dashboard page