nuxt
nuxt copied to clipboard
nuxt
Nuxt extremely slow on dev startup
Environment
Nuxt project info: 12:44:36
- Operating System: Windows_NT
- Node Version: v18.18.0
- Nuxt Version: 3.10.3
- CLI Version: 3.10.1
- Nitro Version: 2.8.1
- Package Manager: [email protected]
- Builder: -
- User Config: modules, vue, experimental, pinia, piniaPersistedstate, css, colorMode, nitro, app, devtools
- Runtime Modules: @vueuse/[email protected], @pinia/[email protected], @nuxtjs/[email protected], @unocss/[email protected], @nuxtjs/[email protected], @formkit/auto-animate/[email protected], @pinia-plugin-persistedstate/[email protected], @element-plus/[email protected], @nuxt/[email protected]
- Build Modules: -
Reproduction
https://github.com/besscroft/kamera
Describe the bug
pnpm run dev
Additional context
No response
Logs
No response
Try to add
"exclude": [ "node_modules" ],to your tsconfig.json
already exists
Is there any update on this issue? I have this problem the exact same way. I have added the node_modules to the exclude clause like said above, but this didn't seem to help at all.
Every time I reload my webpage I have to wait almost 40 to 60 seconds, sometimes even longer.
I have added a picture of how my network tab looks like during these slow reloads.
Here is more info about the project, although I also have this issue in a brand new project using npx nuxi@latest init <project-name>
Information about project:
- Operating System: Windows 11
- Node Version: v20.11.0
- Nuxt Version: 3.10.3
- Nuxi Version: 3.11.1
- Nitro Version: 2.8.1
- Package Manager: [email protected]
If you feel like you would need more information, please reach out. As said earlier, I can provide a reproduction if it is actually necessary, however, for now I would like to point out that I am having this problem with a brand new project too. I also have checked with multiple colleagues, and they are having the exact same problem with Nuxt, this means that it is not just my own computer.
At first, I thought it has something to do with node_modules. But after some researches, it's all about nuxt/ui, Remove nuxt/ui, because it renders all tailwind css, There is over 600 kb of tailwind.css. And sometimes it renders tailwind.css twice. Shadcn only renders tailwindcss over 100kb.
Another solution is to change your config in nuxt.config.ts
Change css:[ '~/assets/css/main.css' ],
to tailwindcss: { cssPath: '~/assets/css/main.pcss' }
I haven't used nuxt/ui in my project, I am using vuetify as a UI library. As far as I can say I also don't use tailwind in my project, so that also wouldn't be a issue. Do you have any other suggestions on what it could be? I have shared my package.json here below.
{ "name": "project", "private": true, "type": "module", "scripts": { "start": "nuxt start", "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare", "format": "prettier . --write", "check": "prettier . --check" }, "dependencies": { "@mdi/font": "^7.4.47", "@nuxtjs/i18n": "^8.1.1", "@types/luxon": "^3.4.2", "chart.js": "^4.4.2", "chartjs-adapter-luxon": "^1.3.1", "luxon": "^3.4.4", "mongoose": "^8.2.0", "nuxt": "^3.10.3", "pg-hstore": "^2.3.4", "prettier": "^3.2.5", "sass": "^1.71.0", "sequelize": "^6.37.1", "tedious": "^17.0.0", "vite-plugin-vuetify": "^2.0.2", "vue": "^3.4.21", "vue-chartjs": "^5.3.0", "vue-router": "^4.3.0", "vuetify": "^3.5.6", "winston": "^3.13.0" } }
Here is my nuxt.config.ts:
import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
export default defineNuxtConfig({ devtools: { enabled: false }, debug: false, app: { head: { title: "project", meta: [ { charset: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }, { hid: "description", name: "description", content: process.env.website_description || "", }, ], link: [ { rel: "icon", type: "image/x-icon", href: "favicon.ico" }, { rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css", }, ], bodyAttrs: { class: "light", }, }, }, modules: [ "@nuxtjs/i18n", (_options: any, nuxt: any) => { nuxt.hooks.hook("vite:extendConfig", (config: any) => { config.plugins.push(vuetify({ autoImport: true })); }); }, ], css: [ "assets/sass/project.scss", ], i18n: { locales: [ { code: "en", name: "English", file: "en.js", }, ], lazy: true, langDir: "lang/", defaultLocale: "en", }, vite: { vue: { template: { transformAssetUrls, }, }, }, build: { transpile: ["vuetify"], }, components: { dirs: [ "~/components", { path: "~/components/Layout", pathPrefix: true, }, { path: "~/components/ChartJS", pathPrefix: true, }, ], }, });
The problem is that I have the same issue while creating a brand new project on a entirely different system, it also doesn't seem to matter whether I am on MacOS or Windows, the issue still persists.
For anyone else having this issue, please check any program/script etc that checks files being transmitted over internet. This issue presented itself to me after I updated my Bitdefender. Due to this update, the node_modules directory wasn't excluded anymore in the files being scanned. This caused the enormous long loading times. Disabling Bitdefender or excluding all node_modules solved this issue for me.
On nuxt v3.9.3 this is not an issue, on nuxt v3.10.3-v3.12.2 it is. See my comment here: https://github.com/nuxt/nuxt/issues/27106#issuecomment-2193748945
My current project info (not experiencing this issue):
------------------------------
- Operating System: Windows_NT
- Node Version: v20.11.1
- Nuxt Version: 3.9.3
- CLI Version: 3.12.0
- Nitro Version: 2.9.6
- Package Manager: [email protected]
- Builder: -
- User Config: extends, nitro, modules, sanity, gtag, runtimeConfig, site, routeRules
- Runtime Modules: @pinia/[email protected], [email protected]
- Build Modules: -
------------------------------
EDIT: I'm using the Vuetify Nuxt module: https://github.com/userquin/vuetify-nuxt-module
@besscroft are you using WSL? I had a similar problem with WSL2 and the filesystem. I've fixed the problem by moving files inside Linux. It was one of the solutions from here.
Have same problem, startup time > 7 minutes
------------------------------
- Operating System: Windows_NT
- Node Version: v20.9.0
- Nuxt Version: 3.12.3
- CLI Version: 3.12.0
- Nitro Version: 2.9.7
- Package Manager: [email protected]
- Builder: -
- User Config: debug, modules, imports, content, routeRules, runtimeConfig, shadcn, experimental, css, colorMode, nitro, app, pwa, devtools, features, eslint, compatibilityDate
- Runtime Modules: @vueuse/[email protected], @unocss/[email protected], @pinia/[email protected], @pinia-plugin-persistedstate/[email protected], @nuxtjs/[email protected], @vite-pwa/[email protected], @nuxt/[email protected], ./modules/shadcn, @nuxt/[email protected]
- Build Modules: -
------------------------------
npm run dev (debug = true)：
> dev
> nuxi dev --port 7000
Nuxt 3.12.3 with Nitro 2.9.7 17:30:01
17:30:02
➜ Local: http://localhost:7000/
➜ Network: use --host to expose
[17:30:10] WARN [nuxt] Expected @nuxt/kit to be at least 3.12.3 but got 3.11.2. This might lead to unexpected behavior. Check your package.json or refresh your lockfile.
[nuxt] modules:before: 5.399ms 17:30:11
[nuxt] kit:compatibility: 187.053ms 17:30:11
[nuxt] kit:compatibility: 187.745ms 17:30:11
[nuxt] kit:compatibility: 189.501ms 17:30:11
[nuxt] kit:compatibility: 190.733ms 17:30:11
[nuxt] kit:compatibility: 195.647ms 17:30:11
[nuxt] kit:compatibility: 196.451ms 17:30:11
[nuxt] kit:compatibility: 197.345ms 17:30:11
[nuxt] kit:compatibility: 200.033ms 17:30:11
[nuxt] kit:compatibility: 200.77ms 17:30:11
[nuxt] kit:compatibility: 201.879ms 17:30:11
[nuxt] kit:compatibility: 202.612ms 17:30:11
i Module vueuse took 0.77ms to setup. 17:30:12
[nuxt] kit:compatibility: 2.278ms 17:30:13
[nuxt] unocss:config: 0.041ms 17:30:17
i Module unocss took 3396.26ms to setup. 17:30:17
[nuxt] kit:compatibility: 0.043ms 17:30:17
[nuxt] kit:compatibility: 0.667ms 17:30:17
[nuxt] kit:compatibility: 1.61ms 17:30:17
i Module pinia took 33.01ms to setup. 17:30:17
[nuxt] kit:compatibility: 0.029ms 17:30:18
[nuxt] kit:compatibility: 0.07ms 17:30:18
i Module @pinia-plugin-persistedstate/nuxt took 1.82ms to setup. 17:30:18
[nuxt] kit:compatibility: 0.033ms 17:30:19
[nuxt] kit:compatibility: 0.176ms 17:30:19
[nuxt] kit:compatibility: 0.803ms 17:30:19
i Module @nuxtjs/color-mode took 6.89ms to setup. 17:30:19
[nuxt] kit:compatibility: 0.024ms 17:30:19
[nuxt] kit:compatibility: 0.668ms 17:30:19
[nuxt] kit:compatibility: 1.082ms 17:30:19
[nuxt] kit:compatibility: 1.794ms 17:30:19
[nuxt] kit:compatibility: 3.247ms 17:30:19
[nuxt] kit:compatibility: 4.659ms 17:30:19
[nuxt] kit:compatibility: 5.107ms 17:30:19
[nuxt] kit:compatibility: 5.739ms 17:30:19
[nuxt] kit:compatibility: 6.339ms 17:30:19
[nuxt] kit:compatibility: 0.432ms 17:30:19
i Module pwa took 11.31ms to setup. 17:30:19
i Module @nuxt/eslint took 104.01ms to setup. 17:30:20
[nuxt] kit:compatibility: 0.031ms 17:30:22
[nuxt] kit:compatibility: 0.75ms 17:30:22
[nuxt] kit:compatibility: 0.941ms 17:30:22
[nuxt] kit:compatibility: 2.109ms 17:30:22
[nuxt] kit:compatibility: 5.205ms 17:30:22
[nuxt] kit:compatibility: 5.954ms 17:30:22
[nuxt] kit:compatibility: 6.821ms 17:30:22
i Module ShadcnVue took 18.92ms to setup. 17:30:22
[nuxt] kit:compatibility: 0.029ms 17:30:23
[nuxt] kit:compatibility: 0.429ms 17:30:23
[nuxt] kit:compatibility: 0.809ms 17:30:23
[nuxt] kit:compatibility: 0.138ms 17:30:23
[nuxt] kit:compatibility: 0.728ms 17:30:23
[nuxt] content:context: 1.488ms 17:30:23
[nuxt] mdc:configSources: 0.029ms 17:30:23
[nuxt] kit:compatibility: 0.587ms 17:30:23
[nuxt] kit:compatibility: 2.396ms 17:30:23
[nuxt] kit:compatibility: 3.842ms 17:30:23
[nuxt] kit:compatibility: 4.694ms 17:30:23
[nuxt] kit:compatibility: 5.569ms 17:30:23
[nuxt] kit:compatibility: 6.274ms 17:30:23
i Module @nuxtjs/mdc took 12.77ms to setup. 17:30:23
i Module @nuxt/content took 325.95ms to setup. 17:30:23
[nuxt] pages:routerOptions: 0.028ms 17:30:23
[nuxt] pages:extend: 0.028ms 17:30:23
writeConfigFiles: 175.124ms beforeWriteFiles() 17:30:23
<index> 17:30:23
├─ :all(.*)*
├─ account
├─ admin
├─ admin/test
├─ blocks
├─ docs/:slug(.*)*
├─ examples/:all(.*)*
├─ hi/:id()
├─ <index>
├─ login
├─ test
├─ themes
└─ try
writeConfigFiles: 180.01ms wrote dts file 17:30:23
writeConfigFiles: 180.518ms 17:30:23
[nuxt] kit:compatibility: 0.031ms 17:30:23
i Module pages took 249.42ms to setup. 17:30:23
[nuxt] kit:compatibility: 5.327ms 17:30:23
[nuxt] kit:compatibility: 5.811ms 17:30:23
[nuxt] kit:compatibility: 6.69ms 17:30:23
[nuxt] kit:compatibility: 7.57ms 17:30:23
[nuxt] kit:compatibility: 9.13ms 17:30:23
[nuxt] kit:compatibility: 9.777ms 17:30:23
[nuxt] kit:compatibility: 12.169ms 17:30:23
[nuxt] kit:compatibility: 13.583ms 17:30:23
[nuxt] kit:compatibility: 14.354ms 17:30:23
[nuxt] kit:compatibility: 15.064ms 17:30:23
i Module meta took 17.96ms to setup. 17:30:23
i Module components took 2.98ms to setup. 17:30:23
[nuxt] imports:sources: 286.391ms 17:30:24
[nuxt] imports:context: 0.104ms 17:30:24
[nuxt] imports:dirs: 0.202ms 17:30:24
[nuxt] imports:extend: 0.502ms 17:30:24
[nuxt] builder:generateApp: 0.038ms 17:30:24
i Module imports took 344.25ms to setup. 17:30:24
i Module nuxt-config-schema took 12.77ms to setup. 17:30:24
i Module @nuxt/telemetry took 0.67ms to setup. 17:30:24
[nuxt] schema:extend: 0.041ms 17:30:24
[nuxt] schema:resolved: 0.037ms 17:30:24
[nuxt] telemetry:setup: 0.037ms 17:30:24
[nuxt] modules:done: 28.459ms 17:30:24
[nuxt] kit:compatibility: 19.089ms 17:30:25
[nuxt] nitro:config: 2.571ms 17:30:25
[nuxt] nitro:init: 1.288s 17:30:27
[nuxt] ready: 0.177ms 17:30:39
[nuxt] listen: 0.017ms 17:30:39
[nuxt] components:dirs: 0.146ms 17:30:39
[nuxt] app:resolve: 5.065ms 17:30:39
[nuxt] prepare:types: 1.496ms 17:30:39
[nuxt] pages:extend: 0.234ms 17:30:39
[nuxt] components:extend: 3.701ms 17:30:40
[nuxt] app:templates: 264.228ms 17:30:40
[nuxt] eslint:config:addons: 25.006ms 17:30:40
i Compiled app-component.mjs in 34.21ms 17:30:40
i Compiled types/app.config.d.ts in 34.22ms 17:30:40
i Compiled app.config.mjs in 34.61ms 17:30:40
i Compiled types/app-defaults.d.ts in 35.07ms 17:30:40
i Compiled types/build.d.ts in 35.63ms 17:30:40
i Compiled nitro.client.mjs in 35.25ms 17:30:40
i Compiled css.mjs in 35.81ms 17:30:40
i Compiled fetch.mjs in 36.28ms 17:30:40
i Compiled error-component.mjs in 36.88ms 17:30:40
i Compiled layouts.mjs in 37.45ms 17:30:40
i Compiled middleware.mjs in 37.23ms 17:30:40
i Compiled types/nitro-nuxt.d.ts in 37.36ms 17:30:40
i Compiled nuxt.config.mjs in 37.98ms 17:30:40
i Compiled paths.mjs in 37.68ms 17:30:40
i Compiled root-component.mjs in 38.22ms 17:30:40
i Compiled test-component-wrapper.mjs in 37.31ms 17:30:40
i Compiled types/vue-shim.d.ts in 37.77ms 17:30:40
i Compiled unocss.mjs in 38.27ms 17:30:40
i Compiled color-mode-options.mjs in 38.65ms 17:30:40
i Compiled pwa-icons/pwa-icons.d.ts in 39.08ms 17:30:40
i Compiled pwa-icons/PwaTransparentImage.d.ts in 39.54ms 17:30:40
i Compiled pwa-icons/PwaMaskableImage.d.ts in 40.1ms 17:30:40
i Compiled pwa-icons/PwaFaviconImage.d.ts in 40.68ms 17:30:40
i Compiled pwa-icons/PwaAppleImage.d.ts in 41.25ms 17:30:40
i Compiled pwa-icons/PwaAppleSplashScreenImage.d.ts in 42.09ms 17:30:40
i Compiled eslint.config.d.mts in 42.62ms 17:30:40
i Compiled content-components.mjs in 43.15ms 17:30:40
i Compiled types/content.d.ts in 42.4ms 17:30:40
i Compiled routes.mjs in 41.43ms 17:30:40
i Compiled pages.mjs in 36.17ms 17:30:40
i Compiled types/middleware.d.ts in 35.99ms 17:30:40
i Compiled types/layouts.d.ts in 43.28ms 17:30:40
i Compiled unhead-plugins.mjs in 44.22ms 17:30:40
i Compiled unhead.config.mjs in 45.45ms 17:30:40
i Compiled components.d.ts in 46.92ms 17:30:40
i Compiled components.plugin.mjs in 36.53ms 17:30:40
i Compiled component-names.mjs in 37.17ms 17:30:40
i Compiled components.islands.mjs in 38.24ms 17:30:40
i Compiled mdc-configs.mjs in 103.08ms 17:30:40
i Compiled mdc-imports.mjs in 102.43ms 17:30:40
i Compiled imports.mjs in 84.86ms 17:30:40
i Compiled imports.d.ts in 85.34ms 17:30:40
[nuxt] pages:routerOptions: 4.787ms 17:30:40
i Compiled router.options.mjs in 141.83ms 17:30:40
i Compiled eslint.config.mjs in 152.47ms 17:30:40
i Compiled types/schema.d.ts in 160.54ms 17:30:40
i Compiled types/imports.d.ts in 145.61ms 17:30:40
i Compiled mdc-highlighter.mjs in 173.29ms 17:30:40
i Compiled plugins/server.mjs in 117.69ms 17:30:40
i Compiled types/plugins.d.ts in 127.95ms 17:30:40
i Compiled plugins/client.mjs in 129.3ms 17:30:40
writeConfigFiles: 0.682ms beforeWriteFiles() 17:30:40
<index> 17:30:40
├─ :all(.*)*
├─ account
├─ admin
├─ admin/test
├─ blocks
├─ docs/:slug(.*)*
├─ examples/:all(.*)*
├─ hi/:id()
├─ <index>
├─ login
├─ test
├─ themes
└─ try
writeConfigFiles: 4.286ms 17:30:40
[nuxt] imports:extend: 0.131ms 17:30:40
[nuxt] builder:generateApp: 0.022ms 17:30:40
[nuxt] app:templatesGenerated: 78.65ms 17:30:40
[nuxt] build:before: 0.028ms 17:30:40
[nuxt] vite:extend: 28.642ms 17:30:45
[nuxt] vite:extendConfig: 3.304ms 17:30:45
[nuxt] vite:configResolved: 0.032ms 17:30:45
[nuxt] builder:chokidar:watch: 4.728s 17:30:45
[nuxt] vite:serverCreated: 2.963ms 17:30:49
[nuxt] server:devHandler: 0.505ms 17:30:49
[nuxt] vite:extendConfig: 16.182ms 17:30:49
[nuxt] vite:configResolved: 0.043ms 17:30:49
[nuxt] build:manifest: 1.353ms 17:30:49
[nuxt] vite:serverCreated: 0.325ms 17:30:49
[nuxt] schema:beforeWrite: 0.174ms 17:30:53
[nuxt] schema:written: 0.036ms 17:34:07
[nuxt] nitro:build:before: 0.033ms 17:34:07
[nitro] rollup:before: 4.973s 17:34:12
[nitro] types:extend: 0.063ms 17:36:15
ERROR Pre-transform error: Element is missing end tag. 17:36:23
i Vite server warmed up in 344338ms 17:36:33
[17:36:41] i ✨ new dependencies optimized: vue-wrap-balancer, @internationalized/date, shiki, magic-string, vaul-vue, @unovis/vue, @unovis/ts, @tanstack/vue-table, vee-validate, zod, radix-vue/date, @vee-validate/zod, date-fns, date-fns/addDays, date-fns/addHours, date-fns/format, date-fns/nextSaturday
i ✨ optimized dependencies changed. reloading 17:36:41
i Vite client warmed up in 354711ms 17:36:43
√ Nuxt Nitro server built in 93560 ms nitro 17:36:46
[nitro] compiled: 2.09ms 17:36:46
[nuxt] build:done: 5:52.947 (m:ss.mmm) 17:36:46
[nitro] dev:reload: 2.136s 17:36:48
after [nuxt] schema:beforeWrite: 0.024ms and [nitro] rollup:before: 4.973s its stuck, a few minutes.
To follow up on this, my build times have significantly improved since v3.12.4. Thank you @danielroe!
Updating my layers to that version also helped. It's still slightly slower once I add in the nuxt-seo module to my base layer, but it's much better.
Without nuxt-seo:
With nuxt-seo:
EDIT: Meant to post this on the related issue here: https://github.com/nuxt/nuxt/issues/27106#issuecomment-2193748945
Nuxt Version: 3.10.3
Nuxt Version: 3.12.4
The speed has been greatly improved thanks to the community's efforts, thank you!
@lingjhf wow, using 127.0.0.1 instead of localhost did the trick for me, loading time in dev mode went from 2 minutes to 3 seconds 🤯🤯🤯 Btw, only Chromium based browsers are affected by this and only on Windows, all my co-workers who are using MacOS don't experiencing any problems. @danielroe do you have any idea what might be causing such localhost reference problem?
I think we need to differentiate between several issues that are discussed in this thread, I don't think they are caused by the same problem, so:
Issue 1: Slow initial build time in dev Caused by the problems related to assets transformation such as TailwindCSS and other build-time operations. Can be improved by updating to a newer version of Vite since they did make some improvements to how files are being processed during both build and dev. Though it won't fix the issue completely in most cases.
Issue 2: Slow browser-level project initialization (In my experience) Only happening on Windows based systems, both, native Windows and WSL2 (though it seems that for WSL2 file resolution is somewhat faster) As pointed above when accessing local pages with 127.0.0.1 instead of localhost e.g. 127.0.0.1:3000/your-page the issue is not reproducible.
For anyone experiencing slow dev server in projects utilizing Nuxt Layers, check out https://github.com/nuxt/nuxt/issues/30137
