小编Sta*_*ski的帖子

最近，我在 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", …