React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.
Table of Contents
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.
Creating a profiling build can be done by specifying an additional --profile flag:
yarn build --profile
npm run build -- --profileAt the moment, the only way to permanently enable production profiling in CRA apps is to eject. Then you can follow the instructions below and apply these changes to config/webpack.config.prod.js in your app folder.
However, you can also enable profiling temporarily without ejecting.
If you only want to profile the application locally in production mode, you can do this by editing node_modules directly.
Follow the instructions below, and apply them to node_modules/react-scripts/config/webpack.config.prod.js. Then you can run yarn build or npm run build to get a profiling build. Note that your changes would be temporary and will not persist between re-runs of your package manager.
To enable profiling in production mode, modify Webpack configuration file (config/webpack.config.prod.js) as shown below.
module.exports = {
// ...
resolve: {
// ...
alias: {
// ...
'react-dom$': 'react-dom/profiling',
},
// ...
},
// ...
};Note that if you're using a version of
react/react-domthat's less than 16.6, you should refer to this earlier revision of the documentation instead.
Note that if you're using the
schedulepackage v0.3.0-v0.4.0 you should refer to this earlier revision of the documentation instead.
When profiling locally, you might want to disable function name mangling so that you can see the component names in the profiler. Note that this will significantly increase your bundle size so only do this during local development! To do this, find the mangle option for UglifyJSPlugin in the config, and set it to false. Don't forget to undo your changes before a real deployment.
If you are using Webpack 4 to bundle your apps, add the following import aliases to your production config:
module.exports = {
//...
resolve: {
alias: {
'react-dom$': 'react-dom/profiling',
}
}
};Note that if you're using a version of
react/react-domthat's less than 16.6, you should refer to this earlier revision of the documentation instead.
Note that if you're using the
schedulepackage v0.3.0-v0.4.0 you should refer to this earlier revision of the documentation instead.
When profiling locally, you might want to disable function name mangling so that you can see the component names in the profiler. Note that this will significantly increase your bundle size so only do this during local development! To do this, find the mangle option for UglifyJSPlugin in the config, and set it to false. Don't forget to undo your changes before a real deployment.
for those using Parcel you can put the alias in package.json
for those wanting it to be applied conditionally with an environment variable the typescript code below can be used for a custom Resolver.
ReactProfilingAliasResolver.ts
node-resolver-core.ts
npm script usage ( windows ) - see build-profile
Note that as there is currently no invalidateOnEnvChange for resolvers the result will be cached and re-used even if you don't set the environment variable.
This is not an issue when you always want to always profile a specific production build that has a different cache key ( entries and mode ). In the example above build-prod and build-profile have a different entry. ( build-profile index.html has a script for standalone react-devtools to enable profiling of a WebView2 ).
If it is an issue then
no-cache.At some point I will add the resolver to npm, but in the meantime here it is.