Vite启动慢

Question

最近，我在 React v18 中启动了一个新项目，它使用 Vite v4.1.1 作为构建工具。安装一些库后，应用程序的初始加载（运行后npm run dev）需要几分钟的时间，即使 Vite 本身会在几秒钟内启动。之后，HMR 工作正常，并且每个更改都会很快反映出来。我注意到某些依赖项需要 1-2 分钟才能获取（在网络选项卡中）。

网络选项卡

在这张图中，一些依赖项是从缓存加载的，但如果不是，react-router、mantime 或 React-query 可能需要一分钟多的时间来加载每个依赖项。这里的主要问题似乎是React应用程序的主要文件，我对此了解得更少。

有人可以解释为什么需要这么长时间以及如何缩短启动时间吗？我看到这可能与预捆绑有关，但在最近的项目中，我的表现并没有这么差。

我的部门：

      "@emotion/react": "^11.10.5",
      "@mantine/carousel": "^5.10.3",
      "@mantine/core": "^5.10.3",
      "@mantine/hooks": "^5.10.3",
      "@tanstack/react-query": "^4.24.4",
      "axios": "^0.27.2",
      "embla-carousel-react": "^7.0.9",
      "react": "^18.2.0",
      "react-dom": "^18.2.0",
      "react-router-dom": "^6.8.1",
      "tabler-icons-react": "^1.56.0"

和开发部门：

      "@types/react": "^18.0.27",
      "@types/react-dom": "^18.0.10",
      "@types/styled-components": "^5.1.26",
      "@typescript-eslint/eslint-plugin": "^5.34.0",
      "@typescript-eslint/parser": "^5.34.0",
      "@vitejs/plugin-react": "^3.0.1",
      "@vitejs/plugin-react-swc": "^3.1.0",
      "autoprefixer": "^10.4.13",
      "eslint": "^8.22.0",
      "eslint-config-airbnb": "^19.0.4",
      "eslint-config-airbnb-typescript": "^17.0.0",
      "eslint-config-prettier": "^8.5.0",
      "eslint-config-standard-with-typescript": "^22.0.0",
      "eslint-import-resolver-typescript": "^3.5.0",
      "eslint-plugin-import": "^2.26.0",
      "eslint-plugin-jsx-a11y": "^6.6.1",
      "eslint-plugin-prettier": "^4.2.1",
      "eslint-plugin-promise": "^6.0.0",
      "eslint-plugin-react": "^7.30.1",
      "eslint-plugin-react-hooks": "^4.6.0",
      "postcss": "^8.4.21",
      "prettier": "^2.7.1",
      "sass": "^1.58.0",
      "tailwindcss": "^3.2.6",
      "typescript": "^4.7.4",
      "vite": "^4.1.1",
      "vite-plugin-eslint": "^1.8.1"

维特配置文件

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import eslintPlugin from 'vite-plugin-eslint';

export default defineConfig({
   plugins: [react(), eslintPlugin()],
   server: {
      port: 3000,
      open: true
   }
});

我只在文档中遇到过关于依赖项预捆绑的简短说明，但这并没有涵盖我的问题。在 GitHub 上还看到一个问题，说 Tailwind 会导致这样的问题，但这个问题甚至在我安装 Tailwind 之前就已经存在了。目前，我不知道是什么导致了这种情况。

Answer 1

我发现 vite 4 及更高版本在更新或更改依赖项后首次启动时会慢一些（因为它尚未优化）。我有时会得到11秒。然而，后续运行速度要快得多，在第 3 轮启动时。也许就是这样？