GoogleChrome/lighthouse

Audit proposal: Detect if React is development mode

Open

#9511 opened on Aug 5, 2019

View on GitHub
 (7 comments) (0 reactions) (0 assignees)JavaScript (27,768 stars) (9,278 forks)batch import
P2good first issuenew_audit

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) on the page. Then, individual renderers in the React source code attempt to inject themselves (ReactDOM.js) 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.

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

Tech stack
javascriptreact
Domain
performancedeveloper experience
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Lighthouse audit basicsReact development mode conceptsJavaScript DOM injection
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Research the React DevTools hook by reviewing the `backend/installGlobalHook.js` file from the React DevTools repository. Understand how React renderers inject themselves via this hook by examining `ReactDOM.js` and `ReactFiberDevToolsHook.js` in the React source. Then, determine how to incorporate a similar detection mechanism into a new Lighthouse audit, possibly by lifting the hook file and injecting it early into the page. Leverage existing Lighthouse audit patterns and the provided issue comments for guidance on implementation.