Slow Vite startup

Question

Recently, I started a new project in React v18 which uses Vite v4.1.1 as a build tool. After installing a few libraries the initial load of the app (after running npm run dev) takes several minutes even though the Vite itself starts within a few seconds. After it, the HMR works fine and every change is reflected very fast. I noticed that some dependencies take 1-2 minutes to fetch (in the network tab).

Network tab

In this picture, some deps are loaded from the cache but if they are not, react-router, mantime or react-query can take over a minute to load each. Here the main issue seems to be the main files of React app, which I understand even less.

Can someone explain why it takes so long and how to improve startup time? I saw that it can be related with pre-bundling but on the recent project, I didn't have such poor performance.

My deps:

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

And dev deps:

      "@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 config file

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

I've only come across the short note about dependency pre-bundling in docs but this doesn't cover my issue. Also saw an issue on GitHub that Tailwind can cause such a problem but the problem existed even before I installed Tailwind. For now, I have no idea what can cause such a state of affairs.

Answer 1

If you are on Windows and running Vite on a WSL (or GitBash) terminal, try Powershell! Some Windows settings and configs might impact the WSL performance accessing LAN

Answer 2

I see you are using tailwind. Please check your tailwind config for your content. In my case i referenced some node_modules paths which leeds to a long initial load time. I added the right "dist" folder and it loads again very fast.