CODEWITHSUNDEEP
javascriptreactjsviteprofiling
Konrad Jamrozik
Konrad Jamrozik

Reputation: 3586

In Vite-based React project, what is the recommended way to enable or disable <Profile> component?

The React doc on Profiler says the following:

Pitfall

Profiling adds some additional overhead, so it is disabled in the production build by default. To opt into production profiling, you need to enable a special production build with profiling enabled.

In that Gist, there are comments like these:

  1. https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=4192069#gistcomment-4192069

which says:

In Vite putting this in vite.config.ts worked:

export default defineConfig({
// ...
    resolve: {
        alias: {
            'react-dom': path.resolve(
                __dirname,
                'node_modules/react-dom/profiling'
            ),
            'scheduler/tracing': path.resolve(
                __dirname,
                'node_modules/scheduler/tracing-profiling'
            ),
        },
    },
// ...
  1. https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977?permalink_comment_id=4989465#gistcomment-4989465

which says:

{
  resolve: {
    alias: [
      { find: /^react-dom$/, replacement: 'react-dom/profiling' },
      { find: 'scheduler/tracing', replacement: 'scheduler/tracing-profiling' }
    ]
  }
}

in vite.config.js did the trick for me.

My question is: is any of these comments the recommended guidance, or is there another way of doing it?

Upvotes: 2

Views: 208

Answers (1)

chrismarx
chrismarx

Reputation: 12555

Just using a simple alias worked for me:

export default defineConfig({
// ...
    resolve: {
        alias: {
          'react-dom/client': 'react-dom/profiling'
        }
    }

And include the <Profiler> component around the app-

See this answer as well - https://stackoverflow.com/a/76647767/228369

Upvotes: 0

Related Questions