Nuxt 2 SSR dev response very slow - vue.js

Question

nuxt: 2.15.8
node: v16.14.2
I've been developing it for over 7 months, I'd like to know if it's normal for other people. because I feel it is very slow before being able to refresh each time Especially when developing with TailwindCSS it is slower than waiting for it to respond.
I use SSR and WSL2 and i think it is not from WSL2 and Docker because its api is very fast.
page response time: 3-6s sometimes 7-10s its very slow
dev build client: 8-30s
dev build server: 9-35s
My files
In folder pages: 40+
In folder components: 60+
In forder plugins: 19
"dependencies": {
"#kangc/v-md-editor": "^1.7.8",
"#nuxt/babel-preset-app": "^2.15.8",
"#nuxtjs/auth-next": "5.0.0-1642502410.8e1c713",
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/composition-api": "^0.31.0",
"#nuxtjs/feed": "^2.0.0",
"#nuxtjs/proxy": "^2.1.0",
"#nuxtjs/robots": "^2.5.0",
"#nuxtjs/sitemap": "^2.4.0",
"#tailwindcss/forms": "^0.5.2",
"#tailwindcss/line-clamp": "^0.3.1",
"#vueform/multiselect": "^2.3.1",
"#vueuse/core": "^7.5.4",
"core-js": "3",
"date-fns": "^2.28.0",
"filepond": "^4.30.3",
"filepond-plugin-file-validate-type": "^1.2.6",
"filepond-plugin-image-preview": "^4.6.10",
"highlight.js": "^11.4.0",
"localforage": "^1.10.0",
"lodash": "^4.17.21",
"markdown-it-video": "^0.6.3",
"maska": "^1.5.0",
"numeral": ">=2",
"nuxt": "^2.15.8",
"nuxt-clipboard": "^0.0.7",
"nuxt-jsonld": "v1",
"nuxt-route-meta": "^2.3.4",
"pusher-js": "^7.1.0-beta",
"tailwind-gradient-mask-image": "^1.0.0",
"tailwind-merge": "^1.2.1",
"tinyduration": "^3.2.2",
"vee-validate": "^3.4.14",
"vue": "^2.6.14",
"vue-advanced-cropper": "^1.10.0",
"vue-demi": "^0.12.1",
"vue-filepond": "^6.0.0",
"vue-filter-number-format": "^3.0.1",
"vue-gtag": "^1.16.1",
"vue-if-bot": "^1.2.0",
"vue-lazyload": "^1.3.3",
"vue-lodash": "^2.1.2",
"vue-notification": "!1.3.16",
"vue-scrollto": "^2.20.0",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vue-toastification": "^1.7.14",
"vue2-datepicker": "^3.11.0",
"vue2-timeago": "^2.0.6",
"vuex-pathify": "^1.5.1",
"vuex-persist": "^3.1.3",
"webpack": "^4.46.0"
},
"devDependencies": {
"#babel/runtime-corejs3": "^7.16.8",
"#iconify/icons-ant-design": "^1.1.1",
"#iconify/icons-bi": "^1.1.12",
"#iconify/icons-bx": "^1.2.3",
"#iconify/icons-carbon": "^1.1.7",
"#iconify/icons-cil": "^1.1.0",
"#iconify/icons-eva": "^1.1.0",
"#iconify/icons-fe": "^1.1.0",
"#iconify/icons-flat-color-icons": "^1.1.0",
"#iconify/icons-fluent": "^1.2.6",
"#iconify/icons-gg": "^1.1.0",
"#iconify/icons-ic": "^1.2.3",
"#iconify/icons-icon-park-outline": "^1.2.1",
"#iconify/icons-ion": "^1.1.2",
"#iconify/icons-la": "^1.2.1",
"#iconify/icons-lucide": "^1.2.11",
"#iconify/icons-mdi": "^1.1.42",
"#iconify/icons-mono-icons": "^1.1.0",
"#iconify/vue2": "^1.1.2",
"#nuxt/postcss8": "^1.1.3",
"#nuxtjs/device": "^2.1.0",
"#nuxtjs/dotenv": "^1.4.1",
"#nuxtjs/laravel-echo": "v2.0.0-alpha.5",
"#vue/test-utils": "^1.3.0",
"#vueuse/nuxt": "^7.5.4",
"autoprefixer": "^10.4.5",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^27.4.4",
"jest": "^27.4.4",
"mini-svg-data-uri": "^1.4.3",
"nuxt-storm": "^1.1.2",
"postcss": "^8.4.5",
"sass": "^1.49.0",
"sass-loader": "^10",
"tailwind-scrollbar": "^1.3.1",
"tailwindcss": "^3.1.8",
"vue-jest": "^3.0.4"
},
I want to know if everyone is like me. Or am I doing something wrong? to make you have to wait every time you press Refresh the web page.
In production it works normally and works fast.

Answer 1

Disclaimer: I don't like WSL so I may be biased saying that it has an impact haha. Nothing beats a vanilla UNIX system performance/stability wise, rather than doing a hacky kernel emulation IMO.
Having WSL and Docker as middlewares between your code and your HMR'ed webpage is clearly a good lead towards why it may be slow (a good optimized configuration may be used there).
You could debug that one by trying your app into a Linux VM (or some colleague's computer) without Docker (quite a cumbersome thing to test for sure but is not that trivial I guess).
Then, you're saying that you have quite some plugins. Those are global things that are run at the start of the rendering process of your Nuxt app, they will definitely slow down the reload speed.
Especially if they are importing huge NPM packages. I recommend to use Import Cost as a VScode extension, quite handy to check how big the package you're importing is big.
Bundlephobia is also a quite nice website for that purpose. Hi 280kB highlight.js!
Make sure that you're using the JIT engine properly with Tailwind too, as this one can bring a LOT of CSS classes that are not used by your code.
Be careful about DOM mismatches because those can impact quite heavily your performance by rehydrating your whole app and mess up even more with Docker/etc.
Be mindful to check what you do have as HTTP calls + middlewares. Mainly check your devtools to try to find out what is making the whole thing slow.
Any kind of analytics + 3rd party scripts like chat boxes, mouse trackers etc...can bring a lot of code and impact your Web Core Vitals quite heavily too.
Try to see if some of your dependecies could be moved towards devDependecies if they are not needed on runtime.
Be sure to have a somewhat decent SSD + CPU + proper cooling to handle a minimal dev experience.
Not sure what is vue-lodash benefit but I recommend using a properly tree-shakable lodash-es solution. Same goes for the rest of the packages, trying to maybe find better/lighter alternatives.
Also, try to remove unneeded packages like #nuxtjs/dotenv (baked-in into Nuxt already).
Finally: SASS. Big boy, if you're not using it to the max, maybe consider removing it especially if you're already using Tailwind + PostCSS.
Most of what I wrote above are "fixed" once bundled for production. And since it's working fast there, I guess it's not a code logic issue per-se (but it still can).
Also, depending on your CI and what kind of endpoints you use locally, you may have some degraded performances locally (some devops teams give slower response times for dev environments).
I may have forgotten a few things and I didn't checked your nuxt.config.js file but I think that you have plenty of things to try out already. Good luck!

Answer 2

It looks like it's from importing Icon packages from "#iconify/icons-xx" because I have to use it offline (Nuxt SSR).
https://docs.iconify.design/icon-components/vue2/offline.html
See issues https://github.com/iconify/iconify/issues/175
Solution: I switched to unplugin-icons for icons to be used offline
So now,My nuxt is loading faster.