React v18 + Vite v4.1.1项目初始加载缓慢问题排查与优化咨询

我用React v18搭建了新项目，构建工具采用Vite v4.1.1。安装完依赖后执行npm run dev，Vite本身几秒就能启动，但应用的初始加载却要花好几分钟。加载完成后HMR（热模块替换）工作正常，代码变更能快速同步到页面。

我观察浏览器网络面板发现，部分依赖的加载耗时长达1-2分钟。截图里部分依赖是从缓存加载的，但如果没有缓存，react-router、mantine、react-query这类依赖每个都可能需要一分钟以上的加载时间，而且React应用的主文件加载也存在问题，这让我完全摸不着头绪。

希望有人能解释问题成因并给出启动时间优化方案。我看过Vite文档里关于依赖预打包的说明，但没找到对应解决办法。也在GitHub上看到过Tailwind导致类似问题的反馈，但我在安装Tailwind之前就已经遇到这个问题了，现在完全不知道问题根源在哪。

生产依赖 #

{
  "@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"
}

Vite配置文件 #

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
   }
});

内容的提问来源于stack exchange，提问作者Stanislaw Gardzielewski