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 perf.

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 I the problem persisted even before I installed Tailwind. For now have no idea what can cause such state of affair ¯\_(ツ)_/¯

Could be the tabler icons. For me it is really slow when I use them in a Vite project. I think it imports the whole library when you only need one icon. — roOt, Mar 15 '23 at 13:12
For sure it adds some time to load but on other projects where I also use them, there is no such issue. — Stanislaw Gardzielewski, Mar 18 '23 at 20:12
Its the same for me. It happened after I installed react-router-dom — meisam, Jul 06 '23 at 10:17

score 0 · Answer 1 · answered Aug 11 '23 at 12:00

Well I don't know what you've tried already but here are some things you can always do to improve startup time:

Dependency Pre-bundling: Vite tries to optimize dependencies by pre-bundling them. If there's an issue or misconfiguration with pre-bundling, it could cause long load times.
CommonJS Dependencies: Vite prefers ESM (ES module) dependencies. If some of your dependencies are in CommonJS format, it can slow down the initial load as Vite has to transform them into ESM on-the-fly.
Large Dependencies: If you have very large dependencies or many dependencies, this could increase the initial load time.
Local Cache: Sometimes the local cache can cause issues. Clearing it might help.

Here are some steps to improve the startup time:

Optimize Dependencies: Check if all of your dependencies are necessary. Maybe some of them can be lazy-loaded or split into different chunks
Update Vite and Plugins: Ensure you're using the latest versions of Vite and its plugins. They often contain performance improvements and bug fixes
Explicitly List Dependencies to Pre-bundle: In your Vite config, you can explicitly tell Vite which dependencies to pre-bundle using the optimizeDeps field:
```
export default defineConfig({
  // ...
  optimizeDeps: {
    include: ["@mantine/hooks", "@tanstack/react-query", ...otherDeps]
  }
});
```
Use esbuild: Vite uses esbuild which is much faster than traditional bundlers. Make sure you're leveraging it by avoiding CommonJS modules when possible. If some of your dependencies are not in ESM format, consider finding alternatives or checking if they provide an ESM build.
Network Issues: Since you mentioned that some dependencies take a long time to fetch in the network tab, there might be network issues or CDN problems. If you're using a custom host for your dependencies or a specific registry, check its health and performance.
Tailwind JIT: If you're using Tailwind CSS with the JIT (Just-In-Time) mode, it can affect initial load times as it needs to scan your files to generate the required CSS. Ensure you've followed the best practices for integrating Tailwind with Vite.

score 0 · Answer 2 · answered Aug 23 '23 at 20:52

I found that vite 4 and later is a bit slower when launching for the first time after a dependency was updated or changed (because it was not yet optimized). I sometimes get 11 seconds. However, subsequent runs are much quicker, at round 3s launch time. Maybe it's that?

Slow Vite startup

2 Answers2