Skip to content

Commit 88cf8cd

Browse files
JacobMGEvansiansu
andcommitted
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]>
1 parent 6b8fa00 commit 88cf8cd

File tree

3 files changed

+20
-1
lines changed

3 files changed

+20
-1
lines changed

docusaurus/docs/available-scripts.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Launches the test runner in the interactive watch mode. See the section about [r
2020

2121
Builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance.
2222

23-
The build is minified and the filenames include the hashes. See the [production build](production-build.md) section for more information.
23+
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.
2424

2525
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.
2626

docusaurus/docs/production-build.md

+6
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,9 @@ Each file inside of the `build/static` directory will have a unique hash appende
2828
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.
2929

3030
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.
31+
32+
## Profiling
33+
34+
ReactDOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small
35+
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
36+
using the React DevTools.

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

+13
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,11 @@ module.exports = function(webpackEnv) {
6666
const isEnvDevelopment = webpackEnv === 'development';
6767
const isEnvProduction = webpackEnv === 'production';
6868

69+
// Variable used for enabling profiling in Production
70+
// passed into alias object. Uses a flag if passed into the build command
71+
const isEnvProductionProfile =
72+
isEnvProduction && process.argv.includes('--profile');
73+
6974
// Webpack uses `publicPath` to determine where the app is being served from.
7075
// It requires a trailing slash, or the file assets will get an incorrect path.
7176
// In development, we always serve from the root. This makes config easier.
@@ -237,6 +242,9 @@ module.exports = function(webpackEnv) {
237242
mangle: {
238243
safari10: true,
239244
},
245+
// Added for profiling in devtools
246+
keep_classnames: isEnvProductionProfile,
247+
keep_fnames: isEnvProductionProfile,
240248
output: {
241249
ecma: 5,
242250
comments: false,
@@ -306,6 +314,11 @@ module.exports = function(webpackEnv) {
306314
// Support React Native Web
307315
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
308316
'react-native': 'react-native-web',
317+
// Allows for better profiling with ReactDevTools
318+
...(isEnvProductionProfile && {
319+
'react-dom$': 'react-dom/profiling',
320+
'scheduler/tracing': 'scheduler/tracing-profiling',
321+
}),
309322
...(modules.webpackAliases || {}),
310323
},
311324
plugins: [

0 commit comments

Comments
 (0)