GoogleChrome / GoogleChrome/lighthouse

Audit proposal: Detect if React is development mode

Open
#9,511 7 comments 0 reactions 0 assignees View on GitHub
good first issue new_audit P2
Dominant language
JavaScript
Stars
30.8k
Forks
9.8k
Avg merge
1d 20h
Merged PRs (30d)
19

Description

#### Provide a basic description of the audit

React DevTools has a feature that detects when a page is using a development version of React. This signals a misconfigured build system, and has a negative effect on page performance.

Their DevTools [installs a hook (`backend/installGlobalHook.js`)](https://github.com/facebook/react-devtools/blob/faa4b630a8c055d5ab4ff51536f1e92604d5c09c/backend/installGlobalHook.js#L23) on the page. Then, individual renderers in the React source code attempt to [inject themselves (ReactDOM.js)](https://github.com/facebook/react/blob/a457e02ae3a2d3903fcf8748380b1cc293a2445e/packages/react-dom/src/client/ReactDOM.js#L880) into DevTools using this hook.

Ideally, we could leverage the above `backend/installGlobalHook.js` file. The backend code isn't on NPM AFAICT, but we should be able to lift the file entirely and just inject it in the page early.

We may want to also throw an error in our version of `inject`, so that React doesn't [install more hooks](https://github.com/facebook/react/blob/d420d2ccb6223a66d5e8fe824ac0d31ed5bf87a1/packages/react-reconciler/src/ReactFiberDevToolsHook.js#L55).

#### How would the audit appear in the report?

A diagnostic that fails if the bundle type is not `production`. Other options are `unminified` and `development`. Perhaps just ignore `outdated`. Read `backend/installGlobalHook.js` for details.

#### How is this audit different from existing ones?

We are leveraging another development tool!

#### What % of developers/pages will this impact?

IDK, React is pretty hot right?

#### How is the new audit making a better web for end users?

don't ship them slower dev-only code.

#### What is the resourcing situation?

One could argue this should be a React-specific plugin. I could see us doing just this audit, and then if there's ever interest in the React community doing more with Lighthouse, we could move this audit to a plugin.

#### Any other links or documentation that we should check out?

no

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.