Nuxt 2 SSR 开发响应非常慢

Question

nuxt: 2.15.8
node: v16.14.2

我已经开发了7个多月了，我想知道它对其他人是否正常。因为我觉得每次都能刷新之前很慢，尤其是在使用 TailwindCSS 开发时，它比等待它响应要慢。

我使用 SSR 和 WSL2，我认为它不是来自 WSL2 和 Docker，因为它的 api 非常快。

page response time:  3-6s sometimes 7-10s its very slow
dev build client: 8-30s
dev build server: 9-35s

我的文件

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"
},

我想知道是否每个人都像我一样。还是我做错了什么？使您每次按刷新网页时都必须等待。

在生产中它可以正常工作并且工作速度很快。

Answer 1

免责声明：我不喜欢 WSL，所以我可能会偏颇地说它有影响哈哈。没有什么比普通 UNIX 系统性能/稳定性更好的了，而不是做一个 hacky 内核仿真 IMO。

将 WSL 和 Docker 作为代码和 HMR 网页之间的中间件显然是一个很好的线索，可以解释为什么它可能很慢（在那里可以使用一个很好的优化配置）。
您可以通过在没有 Docker 的情况下将您的应用程序尝试到 Linux VM（或某些同事的计算机）中来调试该应用程序（确定测试是一件很麻烦的事情，但我猜这并不是那么简单）。

然后，你说你有很多插件。这些是在 Nuxt 应用程序的渲染过程开始时运行的全局事物，它们将确实减慢重新加载速度。
特别是如果他们正在导入巨大的 NPM 包。我建议使用Import Cost 作为 VScode 扩展，非常方便检查您导入的包有多大。
Bundlephobia 也是一个非常好的网站。嗨280kB highlight.js！

确保您也将 JIT engine 与 Tailwind 一起正确使用，因为这会带来很多您的代码未使用的 CSS 类。

小心DOM mismatches，因为它们会通过为整个应用程序补水而严重影响您的性能，并且会更加混乱 Docker/etc。

请注意检查您所拥有的 HTTP 调用 + 中间件。主要检查您的开发工具，以找出导致整个过程变慢的原因。

任何类型的分析 + 3rd 方脚本，如聊天框、鼠标跟踪器等……都可以带来大量代码，并严重影响您的 Web Core Vitals。

如果运行时不需要它们，请尝试查看是否可以将您的某些 dependecies 移至 devDependecies。

确保有一个不错的 SSD + CPU + 适当的冷却来处理最小的开发体验。

不确定vue-lodash 的好处是什么，但我建议使用适当的可摇树的lodash-es solution。其余的包也是如此，试图找到更好/更轻的替代品。

另外，请尝试删除不需要的软件包，例如 @nuxtjs/dotenv (baked-in into Nuxt already)。

最后：SASS。大男孩，如果你没有最大限度地使用它，也许考虑删除它，特别是如果你已经在使用 Tailwind + PostCSS。

---

我上面写的大部分内容在捆绑生产后都是“固定的”。而且由于它在那里工作得很快，我想这本身不是代码逻辑问题（但它仍然可以）。
此外，根据您的 CI 和您在本地使用的端点类型，您的本地性能可能会有所下降（一些 devops 团队为开发环境提供较慢的响应时间）。

我可能忘记了一些事情，并且我没有检查您的nuxt.config.js 文件，但我认为您已经有很多东西可以尝试了。祝你好运！

Answer 2

它看起来像是从“@iconify/icons-xx”导入图标包，因为我必须离线使用它（Nuxt SSR）。 https://docs.iconify.design/icon-components/vue2/offline.html

见问题https://github.com/iconify/iconify/issues/175

解决方法：我切换到unplugin-icons 让图标离线使用

所以现在，我的 nuxt 加载速度更快了。