Skip to content

Support production profiling with React Developer Tools #7737

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iansu merged 12 commits into from
Oct 3, 2019
Merged

Support production profiling with React Developer Tools #7737

Changes from 2 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
ee4af55
Added the alias for profiling and output change to keep the className…
JacobMGEvans Sep 26, 2019
46cd4cd
defined isEnvProductionProfile with other isEnv checks
JacobMGEvans Sep 26, 2019
48976fd
moved the keep_classnames and keep_fnames to terserOptions scope
JacobMGEvans Sep 26, 2019
3f3c3bc
resolve merge conflict for yarn.lock.cache
JacobMGEvans Sep 26, 2019
e52c452
revert yarn.lock.cache to master yarn.lock.cache
JacobMGEvans Sep 26, 2019
56d0841
Comment and Boolean Check
JacobMGEvans Sep 26, 2019
dd71838
Replaced env with flag
JacobMGEvans Sep 28, 2019
bc08ea6
documentation in available scripts section with suggested information
JacobMGEvans Sep 30, 2019
6814e38
resolved a local git issue. Fixed documentation error.
JacobMGEvans Sep 30, 2019
0684979
moved documentation to suggested file
JacobMGEvans Oct 2, 2019
94d5839
Update production-build.md
iansu Oct 3, 2019
b2589c0
Merge branch 'master' into feature-profile-issue#7734
iansu Oct 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions packages/react-scripts/config/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,9 @@ const sassModuleRegex = /\.module\.(scss|sass)$/;
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
// Check to that is used for enabling profiling in alias object
const isEnvProductionProfile =
isEnvProduction && Boolean(process.env.PROFILE_APP);

// 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.
Expand Down Expand Up @@ -240,6 +243,9 @@ module.exports = function(webpackEnv) {
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
// Added for profiling in devtools
keep_classnames: isEnvProductionProfile,
keep_fnames: isEnvProductionProfile,
},
},
// Use multi-process parallel running to improve the build speed
Expand Down Expand Up @@ -303,6 +309,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',
}),
},
plugins: [
// Adds support for installing with Plug'n'Play, leading to faster installs and adding
Expand Down