vitereact-devtools

Run vite preview with --profile

I'm trying to run vite preview and use the react profiler in dev tools, but I can only get the profiler working if I run vite --profile which is a dev build, and I need production.

I've tried this suggestion: https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=4192069#gistcomment-4192069 but no luck.

I run vite build which generates a production build, but my issue is that the profile is never enabled (i.e. not included in the production build). I've tried running vite build --profile but no luck either.

The docs are pretty light on this issue as far as I can tell.

Solution

  • Aliasing react-dom/client (for SPAs) to react-dom/profiling at build time should do the trick:

    // vite.config.ts
const isProduction = process.env.NODE_ENV === "production";

const profiling = isProduction && {
  "react-dom/client": "react-dom/profiling",
};

export default defineConfig({
  ...
  resolve: {
    alias: {
      ...profiling,
    },
  },
});