Open
Description
Description
Is there a way to increase the loading speed or make it tree shaking?
I'm using nuxt v.3.11 and the last version of nuxt/ui.
"devDependencies": { "@nuxt/devtools": "latest", "@nuxt/ui": "^2.15.2", "@nuxtjs/device": "^3.1.1", "@nuxtjs/router-extras": "^1.1.1", "@types/node": "^18.16.19", "autoprefixer": "^10.4.14", "dayjs-nuxt": "^2.1.9", "nuxt": "^3.11.1", "postcss": "^8.4.27", "prettier": "^3.0.3", "sass": "^1.68.0", "sass-loader": "^13.3.2" }, "dependencies": { "@chenfengyuan/vue-countdown": "^2.1.2", "@nuxt/image": "^1.0.0", "@pinia/nuxt": "^0.4.11", "click-outside-vue3": "^4.0.1", "pinia": "^2.1.6", "vue-toastification": "^2.0.0-rc.5", "vue3-carousel": "^0.3.1", "vue3-otp-input": "^0.4.1", "vue3-persian-datetime-picker": "^1.2.2" },
Metadata
Metadata
Assignees
Type
Projects
Milestone
Relationships
Development
No branches or pull requests
Participants
Activity
benjamincanac commentedon May 23, 2024
Would you mind sharing a reproduction? We won't be able to help you with so little informations.
unitythemaker commentedon May 31, 2024
I am also having a similar issue.
I tried to remove each module one-by-one and the problem is with
@nuxt/ui. Removing Nuxt UI module starts the dev server 30-40 seconds faster. Also, even after the dev server starts, when I enter in the browser, it makes me wait for an additional 15-20 seconds (I guess it's rendering something). After this initial slowness, everything is faster afterwards like when changed file in client/server or reloaded page.Production build doesn't have any of these problems. It runs very fast.
Reproduction with similar slowness:
https://github.com/unitythemaker/nuxt-ui-speed-drop
https://stackblitz.com/~/github.com/unitythemaker/nuxt-ui-speed-drop
It runs faster than it runs on my project but I think below results are still not too fast.
Reproduction running on Stackblitz
npx nuxi infopnpm devMy Local
npx nuxi infopnpm devunitythemaker commentedon May 31, 2024
Is there a way to determine where the Vite server spends the most time during the build process?
unitythemaker commentedon May 31, 2024
Here is a build analyze:
nuxt-analyze.zip
Mohsen-graphyy commentedon May 31, 2024
I have removed
@nuxt/uiand reinstalled it in my project and as before nuxt loads fast, only takes 3 or 5 seconds per save change.Faster version:
"@nuxt/ui": "^2.16.0",But I still have the
Vite server 74 hmr files at 36171.41ms. This problem is more visible when starting thenpm run devprogram.unitythemaker commentedon Jun 3, 2024
Do you have
ui: { icons: 'all' }too?I think the problem might be caused by it. I tried to comment it and now it looks like this:
Can you try this too and verify on your project?
bitbytebit1 commentedon Jun 10, 2024
@unitythemaker
You can use DEBUG=* npm run dev to get more information
carlosvaldesweb commentedon Jun 11, 2024
Also happened to me. I've open issue in nuxt repository, thinking that it was a issue with the framework, but i've disabled Nuxt UI and all works correctly.
nuxt/nuxt#27515
carlosvaldesweb commentedon Jun 11, 2024
I think that issue could be related with tailwind, when i use debug:true in my nuxt.config.ts, this is the result. I need to clarify that the problem only occurs to me when I make a change in nuxt.config.ts.
unitythemaker commentedon Jun 11, 2024
For me tailwind takes a total of 7.3s without the
icons: 'all'innuxt.config.ts. However, the Vite server hmr is still the leader with12412.325ms. When it starts, theDEBUG=*doesn't apply for Vite server hmr. It only logs this on me:Here is a breakdown of keywords and their total times:
Figure 1
Full log
Simple Python script I've used to generate these results
unitythemaker commentedon Jun 11, 2024
For anyone also needing to use
icons: all, I've replaced it with this in mynuxt.config.ts:This will only enable some icons and uncompiled ones will be hidden. However, when you build the app for production, it will still compile and add the missing icons.
cliqer commentedon Jul 3, 2024
Same problem. Icons take too much time:
How to disable and just use dynamically loaded icons like with nuxt-icon?
I tried...
...but the layout breaks even when I use
dynamic: truethough icons are displaying.Using
icons: ['']the build takes less time:sethrw commentedon Jul 30, 2024
@unitythemaker @carlosvaldesweb - Did y'all ever figure out why nuxt ui and/or tailwind is causing the page load to be so low? My debug log looks almost exactly the same as yours, and my page load takes 30+ seconds on both dev and prod.
12 remaining items