GoogleChrome
Audit proposal: Detect if React is development mode
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
What % of developers/pages will this impact?
React is detected on 5% of pages of a random sample of HTTPArchive. The detection goes beyond global scope detection (looks for elements with a react root marker too) and is much more aggressive than estimates from other datasets so I'm inclined to believe it despite it sounding low.
Comparatively, jQuery is detected on ~80% of pages of a random sample of HTTPArchive.
If we're about to embark on a framework-specific audit in core, I'd probably want to start with something jQuery-specific :)
Can you somehow weigh those page stats w/ relative traffic? I wonder if more popular sites use React than jquery. Using just % of the web seems misleading. % of page views sounds better.
Can you somehow weigh those page stats w/ relative traffic?
The BuiltWith dataset certainly shows the higher traffic sites use React more often (moving from ~1.5% to ~5% as you go from Top 1M to top 100K), and that's certainly an interesting question if we should rephrase our new audit questionnaire around traffic instead of Lighthouse users.
My gut would say no, we should keep our focus in new audits on where our users are. If we were interested in only having biggest traffic impact it feels like we would end up building ultra-specific tooling and optimizations for the largest 50 sites rather than the majority of users. Still worthwhile and Lighthouse can support their organizations, but I'm not sure we should optimize for them in Lighthouse.
agreed with @patrickhulce and with
One could argue this should be a React-specific plugin
maybe we should make an issue for "Lighthouse plugin proposals/ideas" and add a React one in there with this as a bullet point. Not quite a Good First Issue, but for folks looking to write a plugin, a place they can see ideas (and a place where we can put ideas like this) could be helpful.
Another argument in numbers, but on the opposite side ...
The React extension has 3x the number of installs as the Lighthouse extension, so it seems likely that Lighthouse users might have React somewhere on their site (this is a terribly weak and borderline criminal probabilistic assertion).
Related: HTTPArchice React adoption over time by @rviscomi
5% seems so small for React but numbers don't lie I guess. HTTParchive is using wappalzyer which looks like they detect correctly. I probably live in a React bubble so that's probably why I think so many sites have React :joy:
On Builtwith stats, I'm sure that >5% of sites that are audited with Lighthouse are react.
Idea seems reasonable in general. Only question is how does this proposal compare in priority with other potential new audits. Gotta evaluate that separately.
