Support production profiling with React Developer Tools (#7737)

* Added the alias for profiling and output change to keep the classNames and functionNames for human readbility

* defined isEnvProductionProfile with other isEnv checks

* moved the keep_classnames and keep_fnames to terserOptions scope

* resolve merge conflict for yarn.lock.cache

* revert yarn.lock.cache to master yarn.lock.cache
- git checkout origin/master -- packages/create-react-app/yarn.lock.cached

* Comment and Boolean Check
- I clarified the comment and specified the use case
- Changed the environment check to check for the specific true rather than
the assumed primitive value as before.

* Replaced env with flag
- Per suggestion --profile flag used instead of env variable PROFILE_APP

* documentation in available scripts section with suggested information

* resolved a local git issue. Fixed documentation error.

* moved documentation to suggested file
- Added a brief summary of profiling in available scripts section.
The summary references the production-build document. Which is the
file I moved the new documentation into under a new Header for production support.

* Update production-build.md


Co-authored-by: Ian Sutherland <[email protected]>

docusaurus/docs/available-scripts.md

@@ -20,7 +20,7 @@ Launches the test runner in the interactive watch mode. See the section about [r
 
 Builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes. See the [production build](production-build.md) section for more information.
+The build is minified and the filenames include the hashes. If necessary, classnames and function names can be enabled for profiling purposes. See the [production build](production-build.md) section for more information.
 
 Your app is ready to be deployed! See the section about [deployment](deployment.md) for more information about deploying your application to popular hosting providers.
 

docusaurus/docs/production-build.md

@@ -28,3 +28,9 @@ Each file inside of the `build/static` directory will have a unique hash appende
 To deliver the best performance to your users, it's best practice to specify a `Cache-Control` header for `index.html`, as well as the files within `build/static`. This header allows you to control the length of time that the browser as well as CDNs will cache your static assets. If you aren't familiar with what `Cache-Control` does, see [this article](https://jakearchibald.com/2016/caching-best-practices/) for a great introduction.
 
 Using `Cache-Control: max-age=31536000` for your `build/static` assets, and `Cache-Control: no-cache` for everything else is a safe and effective starting point that ensures your user's browser will always check for an updated `index.html` file, and will cache all of the `build/static` files for one year. Note that you can use the one year expiration on `build/static` safely because the file contents hash is embedded into the filename.
+
+## Profiling
+
+ReactDOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small
+additional overhead it is opt-in for production mode. You can opt-in by using the `--profile` flag. Use `npm run build -- --profile` or `yarn build --profile` to enable profiling in the production build. See the [React docs](https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-devtools-profiler) for details about profiling
+using the React DevTools.

packages/react-scripts/config/webpack.config.js

@@ -66,6 +66,11 @@ module.exports = function(webpackEnv) {
   const isEnvDevelopment = webpackEnv === 'development';
   const isEnvProduction = webpackEnv === 'production';
 
+  // Variable used for enabling profiling in Production
+  // passed into alias object. Uses a flag if passed into the build command
+  const isEnvProductionProfile =
+    isEnvProduction && process.argv.includes('--profile');
+
   // Webpack uses `publicPath` to determine where the app is being served from.
   // It requires a trailing slash, or the file assets will get an incorrect path.
   // In development, we always serve from the root. This makes config easier.
@@ -237,6 +242,9 @@ module.exports = function(webpackEnv) {
             mangle: {
               safari10: true,
             },
+            // Added for profiling in devtools
+            keep_classnames: isEnvProductionProfile,
+            keep_fnames: isEnvProductionProfile,
             output: {
               ecma: 5,
               comments: false,
@@ -306,6 +314,11 @@ module.exports = function(webpackEnv) {
         // 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',
+        // Allows for better profiling with ReactDevTools
+        ...(isEnvProductionProfile && {
+          'react-dom$': 'react-dom/profiling',
+          'scheduler/tracing': 'scheduler/tracing-profiling',
+        }),
         ...(modules.webpackAliases || {}),
       },
       plugins: [