Skip to content

new_audit(best-practices): add React development mode audit - #17157

Open
plutoTaco wants to merge 2 commits into
GoogleChrome:mainfrom
plutoTaco:add-react-dev-mode-audit
Open

new_audit(best-practices): add React development mode audit#17157
plutoTaco wants to merge 2 commits into
GoogleChrome:mainfrom
plutoTaco:add-react-dev-mode-audit

Conversation

@plutoTaco

Copy link
Copy Markdown

Summary
This introduces a new_audit to the Best Practices category.

React development builds are unoptimized and significantly larger than production builds, which negatively impacts page load performance. This PR introduces a new Gatherer and Audit to detect if a target page is currently running an unoptimized React development build.

  • Gatherer (react-dev-mode.js): Utilizes Page.addScriptToEvaluateOnNewDocument during the startInstrumentation lifecycle to safely inject a dummy __REACT_DEVTOOLS_GLOBAL_HOOK__. This intercepts the React renderer upon boot to evaluate bundleType before the page fully loads, bypassing NO_FCP timeouts.
  • Audit (react-dev-mode.js): Scores a 0 if a development build is detected, and 1 if running in production (or if React is not present).

Related Issues/PRs

  • Added the gatherer and audit to core/config/default-config.js as required.
  • Included unit tests via Mocha in core/test/audits/react-dev-mode-test.js.
  • Formatted the Audit description to explain both importance and remediation, as an official reference doc does not exist yet.

@plutoTaco
plutoTaco requested a review from a team as a code owner August 6, 2026 08:51
@plutoTaco
plutoTaco requested review from paulirish and removed request for a team August 6, 2026 08:51
@google-cla

google-cla Bot commented Aug 6, 2026

Copy link
Copy Markdown

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant