Replace DevTools `semver` usages with `compare-versions` for smaller bundle size #26122

markerikson · 2023-02-07T18:02:52Z

Summary

This PR:

Replaces the existing usages of comparison methods from the semver library in the React DevTools source with the equivalent method from the https://www.npmjs.com/package/compare-versions library

This appears to drop the unminified bundle sizes of 3 separate react-devtools-extensions build artifacts by about 50K:

How did you test this change?

I was originally working on a fork of React DevTools for use with https://replay.io , specifically our integration of the React DevTools UI to show the React component tree while users are debugging a recorded application.

As part of the dev work on that fork, I wanted to shrink the bundle size of the extension's generated JS build artifacts. I noted that the official NPM semver library was taking up a noticeable chunk of space in the bundles, and saw that it's only being used in a handful of places to do some very simple version string comparisons.

I was able to replace the semver imports and usages with a simple alternate comparison function, and confirmed via hands-on checks and console logging that the checks behaved the same way.

Given that, I wanted to upstream this particular change to help shrink the real extension's bundle sizes.

I know that it's an extension, so bundle size isn't as critical a concern as it would be for a pure library. But, smaller download sizes do benefit all users, and that also includes sites like CodeSandbox and Replay that are using the React DevTools as a library as well.

I'm happy to tweak this PR if necessary. Thanks!

bvaughn · 2023-02-07T18:38:56Z

packages/react-devtools-shared/src/backend/renderer.js

+
+function gte(a: string = '', b: string = '') {
+  return semvercmp(a, b) > -1;
+}


nit: These should probably go into a file like packages/react-devtools-shared/src/backend/utils.js since they're not specifically related to React (and that way we won't have to define them twice)

Thanks for the pointer, done!

bvaughn

Seems nice to shrink the bundle.

cc @mondaychen

bvaughn · 2023-02-07T20:27:07Z

packages/react-devtools-shared/src/backend/utils.js

+    if (isNaN(na) && !isNaN(nb)) return -1;
+  }
+  return 0;
+}


Could use a few basic unit tests :D

mondaychen

Thanks! Saving 50KB sounds awesome!
One concern on semver-compare

mondaychen · 2023-02-07T21:01:37Z

packages/react-devtools-shared/src/backend/utils.js

+  const pb = b.split('.');
+  for (let i = 0; i < 3; i++) {
+    const na = +pa[i];
+    const nb = +pb[i];


This function assumes all characters in the string are numbers after split by '.'. However in renderer.js there a usage of gte(version, '18.0.0-alpha')

Hmm. Good point. This appears to convert to NaN.

I'd have to think about the intended semantics here a bit more to decide on what an appropriate numeric conversion and comparison would be. Let me get back to you on that one.

I found this https://semver.org/#spec-item-11
Hope it's helpful!
BTW I'm fine with a simplified compare logic as long as it works with React version numbers

Nice catch!

So it turns out that the NaN behavior here actually works as desired.

I pulled in the test code from https://unpkg.com/browse/semver-compare@1.0.0/test/cmp.js and expanded it with several pre-release examples. Those do actually sort correctly, like:

expect(sortedVersions).toEqual([ '1.2.3', '1.5.5', '1.5.19', '2.3.1', '4.1.3', '4.2.0', '4.11.6', '10.5.5', // Specifically check non-numerical pre-release versions '11.0.0-alpha.0', '11.0.0-alpha.1', '11.0.0', '11.3.0', ]);

I also tweaked the logic to handle more dots. I don't think React uses that specific -alpha.N convention the way I do for Redux, but it was easy enough to add.

I think this resolves that issue.

consider this case

const unsortedVersions = ['18.0.2', '18.0.1', '18.0.1-alpha', '18.0.0-alpha.1', '18.0.2-alpha', '18.0.1-alpha.1', '18.0.0']; unsortedVersions.slice().sort(semvercmp); (7) ['18.0.1-alpha', '18.0.2-alpha', '18.0.0-alpha.1', '18.0.1-alpha.1', '18.0.0', '18.0.1', '18.0.2']

I did some additional searching on NPM. I'd originally been copying code from https://www.npmjs.com/package/semver-compare . After looking around, I found https://www.npmjs.com/package/compare-versions . It's a bit larger (~200 lines, but that includes lots of comments, and it's only 625b min+gz), but seems to 100% match results from using the actual semver library.

I can either add compare-versions as a dependency, or copy-paste and inline it with attribution as I was doing earlier. Is there a preference which we go with?

I vote for adding compare-versions as a dependency.
Thanks for doing this!

Okay, I'll go ahead and remove the inlined behavior and switch to compare-versions as an added dependency.

Awesome! thank you all for sorting this all out 🙇🏼

react-sizebot · 2023-02-08T21:24:36Z

Comparing: f0cf832...4dc651f

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	154.84 kB	154.84 kB	=	49.12 kB	49.12 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	156.85 kB	156.85 kB	=	49.78 kB	49.78 kB
facebook-www/ReactDOM-prod.classic.js	=	533.79 kB	533.79 kB	=	95.06 kB	95.06 kB
facebook-www/ReactDOM-prod.modern.js	=	518.81 kB	518.81 kB	=	92.82 kB	92.82 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 4dc651f

markerikson · 2023-02-08T23:09:23Z

Okay, I've updated this to use compare-versions instead. Please let me know if anything else is needed!

mondaychen · 2023-02-09T00:59:02Z

lgtm!

…bundle size (#26122)  ## Summary This PR: - Replaces the existing usages of methods from the `semver` library in the React DevTools source with an inlined version based on https://www.npmjs.com/package/semver-compare. This appears to drop the unminified bundle sizes of 3 separate `react-devtools-extensions` build artifacts by about 50K: ![image](https://user-images.githubusercontent.com/1128784/217326947-4c26d1be-d834-4f77-9e6e-be2d5ed0954d.png) ## How did you test this change? I was originally working on [a fork of React DevTools](replayio#2) for use with https://replay.io , specifically our integration of the React DevTools UI to show the React component tree while users are debugging a recorded application. As part of the dev work on that fork, I wanted to shrink the bundle size of the extension's generated JS build artifacts. I noted that the official NPM `semver` library was taking up a noticeable chunk of space in the bundles, and saw that it's only being used in a handful of places to do some very simple version string comparisons. I was able to replace the `semver` imports and usages with a simple alternate comparison function, and confirmed via hands-on checks and console logging that the checks behaved the same way. Given that, I wanted to upstream this particular change to help shrink the real extension's bundle sizes. I know that it's an extension, so bundle size isn't _as_ critical a concern as it would be for a pure library. But, smaller download sizes do benefit all users, and that also includes sites like CodeSandbox and Replay that are using the React DevTools as a library as well. I'm happy to tweak this PR if necessary. Thanks! DiffTrain build for [78d2e9e](78d2e9e) [View git log for this commit](https://github.com/facebook/react/commits/78d2e9e2a894a7ea9aa3f9faadfc4c6038e86a75)

facebook-github-bot added the CLA Signed label Feb 7, 2023

markerikson force-pushed the feature/simplify-devtools-semver branch 2 times, most recently from 320e65d to 2673489 Compare February 7, 2023 18:26

bvaughn reviewed Feb 7, 2023

View reviewed changes

markerikson force-pushed the feature/simplify-devtools-semver branch 2 times, most recently from f3e1ac9 to d1fd90e Compare February 7, 2023 19:12

bvaughn approved these changes Feb 7, 2023

View reviewed changes

mondaychen suggested changes Feb 7, 2023

View reviewed changes

markerikson force-pushed the feature/simplify-devtools-semver branch from d1fd90e to 337ae03 Compare February 8, 2023 16:24

Replace DevTools semver usages with compare-versions for size

4dc651f

markerikson force-pushed the feature/simplify-devtools-semver branch from 337ae03 to 4dc651f Compare February 8, 2023 21:17

mondaychen approved these changes Feb 9, 2023

View reviewed changes

markerikson changed the title ~~Replace DevTools semver usages with a simpler inlined method~~ Replace DevTools semver usages with compare-versions for smaller bundle size Feb 9, 2023

mondaychen merged commit 78d2e9e into facebook:main Feb 9, 2023

bvaughn deleted the feature/simplify-devtools-semver branch February 9, 2023 01:18

kassens mentioned this pull request Feb 10, 2023

Minor Jest upgrade kassens/react#3

Closed

sammy-SC mentioned this pull request Apr 5, 2023

Use native scheduler if defined sammy-SC/react#1

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace DevTools `semver` usages with `compare-versions` for smaller bundle size #26122

Replace DevTools `semver` usages with `compare-versions` for smaller bundle size #26122

markerikson commented Feb 7, 2023 •

edited

Loading

bvaughn Feb 7, 2023 •

edited

Loading

markerikson Feb 7, 2023

bvaughn left a comment

bvaughn Feb 7, 2023

mondaychen left a comment

mondaychen Feb 7, 2023

markerikson Feb 7, 2023

mondaychen Feb 7, 2023

bvaughn Feb 7, 2023

markerikson Feb 8, 2023

mondaychen Feb 8, 2023

markerikson Feb 8, 2023

mondaychen Feb 8, 2023 •

edited

Loading

markerikson Feb 8, 2023

bvaughn Feb 9, 2023

react-sizebot commented Feb 8, 2023

markerikson commented Feb 8, 2023

mondaychen commented Feb 9, 2023

Replace DevTools semver usages with compare-versions for smaller bundle size #26122

Replace DevTools semver usages with compare-versions for smaller bundle size #26122

Conversation

markerikson commented Feb 7, 2023 • edited Loading

Summary

How did you test this change?

bvaughn Feb 7, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bvaughn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mondaychen left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mondaychen Feb 8, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

react-sizebot commented Feb 8, 2023

Critical size changes

Significant size changes

markerikson commented Feb 8, 2023

mondaychen commented Feb 9, 2023

Replace DevTools `semver` usages with `compare-versions` for smaller bundle size #26122

Replace DevTools `semver` usages with `compare-versions` for smaller bundle size #26122

markerikson commented Feb 7, 2023 •

edited

Loading

bvaughn Feb 7, 2023 •

edited

Loading

mondaychen Feb 8, 2023 •

edited

Loading