Search code examples
reactjsvitereact-adminbun

Slow vite startup with bun

I have an existing react-admin project running with node and vite. Now I wanted to use bun for a faster startup. Initially, bun was starting up the project within a second or two, but then I needed to do a lot of adjusting for testing and typescript so and now the startup time is around 70 seconds.

Here's my package.json file:

{
  "name": "react-admin-app",
  "private": true,
  "version": "0.0.0",
  "proxy": "http://localhost:5000",
  "type": "module",
  "scripts": {
    "dev": "bunx --bun vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@apollo/client": "^3.9.10",
    "@emotion/styled": "^11.11.5",
    "@fortawesome/free-solid-svg-icons": "^6.5.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@material/react-chips": "^0.15.0",
    "@mui/icons-material": "^5.15.14",
    "@mui/lab": "^5.0.0-alpha.169",
    "@mui/material": "^5.15.14",
    "@mui/styled-engine": "^5.15.14",
    "@mui/styles": "^5.15.14",
    "@mui/x-date-pickers": "6.19.7",
    "@sentry/browser": "^7.109.0",
    "@sentry/react": "^7.109.0",
    "@tanstack/react-virtual": "^3.2.0",
    "@wojtekmaj/react-daterange-picker": "^5.5.0",
    "base64url": "^3.0.1",
    "classnames": "^2.5.1",
    "country-data": "^0.0.31",
    "dayjs": "^1.11.10",
    "jwt-decode": "^4.0.0",
    "moment": "^2.30.1",
    "oidc-client": "^1.11.5",
    "prop-types": "^15.8.1",
    "query-string": "^9.0.0",
    "ra-data-graphql": "^4.16.12",
    "ra-data-json-server": "^4.16.12",
    "react": "^18.2.0",
    "react-admin": "^4.16.14",
    "react-apexcharts": "^1.4.1",
    "react-calendar": "^4.8.0",
    "react-circular-progressbar": "^2.1.0",
    "react-confirm-alert": "^3.0.6",
    "react-country-flag": "^3.1.0",
    "react-day-picker": "^8.10.0",
    "react-dom": "^18.2.0",
    "react-final-form": "^6.5.9",
    "react-helmet": "^6.1.0",
    "react-icons": "^5.0.1",
    "react-json-view": "^1.21.3",
    "react-loading": "^2.0.3",
    "react-pdf": "^7.7.1",
    "react-select": "^5.8.0",
    "react-swipeable-views": "^0.14.0",
    "react-tiny-link": "^3.6.1",
    "react-use-draggable-scroll": "^0.4.7",
    "uuid": "^9.0.1",
    "validator": "^13.11.0",
    "vite-plugin-chunk-split": "^0.5.0",
    "vite-tsconfig-paths": "^4.3.2"
  },
  "devDependencies": {
    "@codecov/vite-plugin": "^0.0.1-beta.5",
    "@happy-dom/global-registrator": "^14.3.10",
    "@sentry/vite-plugin": "^2.16.0",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^14.2.2",
    "@testing-library/user-event": "^14.5.2",
    "@types/bun": "^1.0.12",
    "@types/jest": "^29.5.12",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@types/web": "^0.0.142",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "@vitejs/plugin-react-swc": "^3.5.0",
    "cypress": "^13.7.2",
    "eslint": "^8.57.0",
    "eslint-plugin-cypress": "^2.15.1",
    "eslint-plugin-jest-dom": "^5.2.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "happy-dom": "^14.3.10",
    "jest": "^29.7.0",
    "jest-matcher-utils": "^29.7.0",
    "jsdom": "^24.0.0",
    "msw": "^1.3.2",
    "typescript": "^5.2.2",
    "vite": "^5.2.0",
    "vitest": "^1.4.0"
  },
  "msw": {
    "workerDirectory": "public"
  },
  "module": "index.ts"
}

vite.config.ts

/// <reference types="vitest" />
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import viteTsconfigPaths from "vite-tsconfig-paths";
import { chunkSplitPlugin } from "vite-plugin-chunk-split";
import { codecovVitePlugin } from "@codecov/vite-plugin";
import { sentryVitePlugin } from "@sentry/vite-plugin";

export default defineConfig({
  plugins: [
    react(),
    viteTsconfigPaths(),
    chunkSplitPlugin(),
    codecovVitePlugin({
      enableBundleAnalysis: true,
      bundleName: <redacted>,
      uploadToken: process.env.CODECOV_TOKEN,
    }),
    sentryVitePlugin({
      org: <redacted>,
      project: <redacted>,
      authToken: <redacted>,
      sourcemaps: {
        assets: "./**",
        ignore: ["./node_modules/**", "./public/**"],
      },
      telemetry: false,
    }),
  ],
  build: {
    outDir: "build",
    sourcemap: true,
  },
  server: {
    open: true,
    port: 3000,
  },

  test: {
    globals: true,
    environment: "happy-dom",
    reporters: process.env.GITHUB_ACTIONS ? ["dot", "github-actions"] : ["dot"],
    coverage: {
      reporter: ["lcovonly"],
      exclude: ["**/public/**", "**/node_modules/**"],
    },
    setupFiles: "./src/tests/setup.ts",
  },
});

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "moduleDetection": "force",
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "verbatimModuleSyntax": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "allowJs": false,
    "noImplicitAny": false,
    "noImplicitThis": true,
    "noPropertyAccessFromIndexSignature": true,
    "baseUrl": "./src",
    "paths": {
      "src/*": ["./src/*"]
    },

    "types": ["web", "node", "bun"]
  },
  "include": ["src", "happydom.ts"]
}

Anything obvious that makes it that slow?

Solution

  • For additional debugging I create a fresh project with bun create vite and it was already slow from the beginning. Then I uninstalled the Ninja VS Code extension and immediately the problems disappeared.