Nuxt 2 SSR dev response very slow-CodePudding

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.

CodePudding user response：

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