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,
        },
      },
    });