How I make my Vite dev server experience faster

I have a web app that operates as a SPA (Single Page App). It's built on regular Vite + React + TypeScript. In production you just host the built static assets, but in development (for hot module reloading and stuff) I use the built-in dev server in Vite. This is what you get when you type vite without any other command line arguments.

But here's what happens, you're in the terminal and you type npm run dev and hit Enter. Then, using your trackpad or keyboard shortcuts you switch over to a browser tab and go to http://localhost:5173/. When you get there to the first request, Vite starts at the entry point, which is src/main.tsx and from there, it looks at its imports and starts transpiling the files needed. You can see what happens with vite --debug transform.

With debug:

> vite --debug transform

  VITE v5.4.9  ready in 115 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Now, go to you browser and open http://localhost:5173/ and when you come back to the terminal you'll see:

  vite:transform 22.10ms /src/main.tsx +0ms
  vite:transform 1.70ms /@react-refresh +4ms
  vite:transform 0.92ms /@vite/client +6ms
  vite:transform 0.52ms /node_modules/.vite/deps/react.js?v=a11c1f03 +5ms
  vite:transform 0.69ms /node_modules/.vite/deps/react-dom_client.js?v=a11c1f03 +1ms
  vite:transform 0.63ms /node_modules/.vite/deps/react_jsx-dev-runtime.js?v=a11c1f03 +1ms
  vite:transform 5.84ms /src/App.tsx +5ms
  vite:transform 1.04ms /node_modules/.vite/deps/chunk-QCHXOAYK.js?v=a11c1f03 +20ms
  vite:transform 0.07ms /node_modules/.vite/deps/chunk-WOOG5QLI.js?v=a11c1f03 +1ms
  vite:transform 0.08ms /node_modules/vite/dist/client/env.mjs +0ms
  vite:transform 0.99ms /node_modules/.vite/deps/@mantine_core.js?v=a11c1f03 +3ms
  vite:transform 0.84ms /node_modules/.vite/deps/@mantine_notifications.js?v=a11c1f03 +1ms
  vite:transform 1.45ms /node_modules/.vite/deps/@tanstack_react-query.js?v=a11c1f03 +1ms
  vite:transform 9.64ms /node_modules/.vite/deps/chunk-T2SWDQEL.js?v=a11c1f03 +10ms
  vite:transform 4.32ms /node_modules/@mantine/core/styles.css +14ms
  vite:transform 0.30ms /node_modules/@mantine/notifications/styles.css +1ms
  vite:transform 27.68ms /src/routes.tsx +1ms
  ....
  ....roughly 50 more lines like these...
  ....  

Vite is fast. Plenty fast. But as the app gets larger and you want to work as fast as possible, there's an opportunity of optimizing the dev server. Namely, the server.warmup.clientFiles option. As documented here.

So I edit my vite.config.ts file to this:

export default defineConfig({
  plugins: [react()],
  server: {
    warmup: {
      clientFiles: ["./src/main.tsx"],
    },
  },
});

Now, next time you type vite --debug transform it immediately starts printing those transforms that it does, immediately. This has the advantage that when your human slowness manages itself over to the browser tab to start looking at that http://localhost:5173/ most of the files have already been transformed and you get an extra speedy first start.