How to use profiling in production mode for react-dom

index.md

React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.

Create React App

At the moment, the only way to enable production profiling in CRA apps is to eject and modify the production Webpack configuration file (config/webpack.config.prod.js) as shown below:

react-dom@^16.5.0 / schedule@^0.4.0

module.exports = {
  output: {
    alias: {
      'react-dom': 'react-dom/profiling',
      'schedule/tracking': 'schedule/tracking-profiling',
    },
  },
};

react-dom@^16.5.0 / schedule@0.3.0

Note that if you're using the schedule package v0.3.0 you should declare the following alias instead:

module.exports = {
  output: {
    alias: {
      'react-dom': 'react-dom/profiling',
      'schedule/tracking': 'schedule/cjs/schedule-tracking.profiling.min'
    },
  },
};

Webpack 4

If you are using Webpack 4 to bundle your apps, add the following import aliases to your production config:

react-dom@^16.5.0 / schedule@^0.4.0

module.exports = {
  //...
  resolve: {
    alias: {
      'react-dom': 'react-dom/profiling',
      'schedule/tracking': 'schedule/tracking-profiling',
    }
  }
};

react-dom@^16.5.0 / schedule@0.3.0

Note that if you're using the schedule package v0.3.0 you should declare the following alias instead:

module.exports = {
  //...
  resolve: {
    alias: {
      'react-dom': 'react-dom/profiling',
      'schedule/tracking': 'schedule/cjs/schedule-tracking.profiling.min'
    }
  }
};