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