URL: https://vite.dev/guide/performance#warm-up-frequently-used-files

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.

Comments

Your email will never ever be published.

Previous:
How to extend a function in TypeScript without repeating the signature types October 16, 2024 JavaScript
Next:
Object.keys to return the known strings of an object in TypeScript October 25, 2024 JavaScript
Related by category:
Switching from Next.js to Vite + wouter July 28, 2023 JavaScript, Node, React
How to SSG a Vite SPA April 26, 2025 JavaScript, React
An ideal pattern to combine React Router with TanStack Query November 18, 2024 JavaScript, React
fnm is much faster than nvm. December 28, 2023 Node
Related by keyword:
Switching from Next.js to Vite + wouter July 28, 2023 Node, React, JavaScript
An ideal pattern to combine React Router with TanStack Query November 18, 2024 React, JavaScript
Wouter + Vite is the new create-react-app, and I love it August 16, 2024 Node, React, Bun
ts-node vs. esrun vs. esno vs. bun August 28, 2023 Node, JavaScript