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 <ian@iansutherland.ca>

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: [