diff --git a/docusaurus/docs/available-scripts.md b/docusaurus/docs/available-scripts.md index b171147528d..effdc2b7936 100644 --- a/docusaurus/docs/available-scripts.md +++ b/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. diff --git a/docusaurus/docs/production-build.md b/docusaurus/docs/production-build.md index acd7e02a2c3..8acb30fc9eb 100644 --- a/docusaurus/docs/production-build.md +++ b/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. diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 15854139057..f4391c39fb7 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/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: [