search

facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
228.53k stars 46.77k forks source link

Bug: React Dev Tools extension causing unused code warning in Lighthouse audit #19694

Closed joshbangle closed 4 years ago

joshbangle commented 4 years ago

When auditing my portfolio made with Create-React-App with the Chrome Lighthouse performance tool, I was showing a large amount of unused code when doing the mobile audit coming from the React Dev Tools extension url. After disabling the extension, my performance score went from 77 to 98.

React version: 16.13.1

Dev Tools version: 4.8.2

Steps To Reproduce

  1. Open a live website made with CRA
  2. Run Lighthouse with Device: Mobile selected

Not so much a bug as an issue when performance auditing. I don't believe posting my code will be of benefit, but if so then I'm happy to link to my website github.

bvaughn commented 4 years ago

It's probably a good idea to disable Chrome extensions (including React DevTools) when doing perf auditing or profiling, as they will always impact those metrics. (These extensions work by injecting additional script into the page to add behavior. Since this additional script isn't part of what your users would be running, it's not relevant to the metrics you're collecting.)

I don't think this issue is actionable, unless I'm misunderstanding something.

eps1lon commented 4 years ago

This sounds like a lighthouse bug to me. Why would it audit JS for which lighthouse already knows that it comes from extensions?

Notice that I explicitly disabled showing 3rd party resources but it still includes extensions.

lighthouse mobile performance audit for reactjs.org: screenshot lighthouse mobile performance audit for reactjs.org with 3rd party resources disabled. Showing react_devtools_backend with large amounts of unused JS

bvaughn commented 4 years ago

I don't think this issue is all that actionable, so I'm going to close it. I will keep watching (and participating in) the discussion though.

joshbangle commented 4 years ago

Yea the initial intent was to have a conversation about it more than a Bug, but there wasn't a great option to do that here and I wasn't sure this was even the place. It does seem pretty basic that lighthouse would filter out local extensions when auditing JS run in the browser. And it's even more strange to me that it only has this issue in mobile audits and not desktop.

bvaughn commented 4 years ago

And it's even more strange to me that it only has this issue in mobile audits and not desktop.

Stupid question, but I wonder if the fact that the extension doesn't support mobile (b'c it doesn't support e.g. mobile Chrome) might be impacting the metrics/heuristics somehow?