Description
I wrote a blog post about how to properly profile a React App for Performance and I use a react-scripts app to demonstrate how to do it. There are a few steps in there that I'd love to make easier.
Specifically, you have to go into ./node_modules/react-scripts/config/webpack.config.js to update the webpack config to add this to resolve.alias:
'react-dom$': 'react-dom/profiling',
'scheduler/tracing': 'scheduler/tracing-profiling',And you have to add this to the Terser options:
keep_classnames: true,
keep_fnames: true,It's a bit of an annoying process and I think we could make it a lot easier (and hopefully encourage people to profile their apps in the process).
Describe the solution you'd like
We'd make a change here:
create-react-app/packages/react-scripts/config/webpack.config.js
Lines 302 to 306 in 0d1775e
- alias: {
+ alias: removeEmpty({
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
+ 'react-dom$': isEnvProductionProfile ? 'react-dom/profiling' : null,
+ 'scheduler/tracing': isEnvProductionProfile ? 'scheduler/tracing-profiling' : null,
+ }),
- },Where removeEmpty is something like (borrowed from webpack-config-utils):
function removeEmpty(input) {
const output = {}
Object.keys(input).forEach(key => {
const value = input[key]
if (typeof value !== 'undefined') {
output[key] = value
}
})
return output
}and isEnvProductionProfile is defined as: isEnvProduction && Boolean(process.env.PROFILE_APP).
We'd also add this right above:
keep_classnames: isEnvProductionProfile,
keep_fnames: isEnvProductionProfile,Describe alternatives you've considered
Currently the alternative is to change it manually (and if you deploy from your local build then you need to remember to remove your edits).
Additional context
I'm bringing this up because I'd love to update my blog post to simply be: "Now, run the build in profiling mode with npx cross-env PROFILE_APP=true npm run build." That would be awesome. And it would make every-day profiling much simpler as well.