Skip to content

Commit cbbf551

Browse files
committed
Replace DevTools semver usages with compare-versions for smaller bundle size (#26122)
<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory. Before submitting a pull request, please make sure the following is done: 1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`. 2. Run `yarn` in the repository root. 3. If you've fixed a bug or added code that should be tested, add tests! 4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development. 5. Run `yarn test --prod` to test in the production environment. It supports the same options as `yarn test`. 6. If you need a debugger, run `yarn debug-test --watch TestName`, open `chrome://inspect`, and press "Inspect". 7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`). 8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files. 9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`). 10. If you haven't already, complete the CLA. Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html --> ## 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)
1 parent 3945ca9 commit cbbf551

28 files changed

Lines changed: 42 additions & 42 deletions

compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
a3152eda5f89e20f056521855f7fa101ce50e4c3
1+
78d2e9e2a894a7ea9aa3f9faadfc4c6038e86a75
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
a3152eda5f89e20f056521855f7fa101ce50e4c3
1+
78d2e9e2a894a7ea9aa3f9faadfc4c6038e86a75

compiled/facebook-www/React-dev.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ if (
2727
}
2828
"use strict";
2929

30-
var ReactVersion = "18.3.0-www-classic-a3152eda5-20230208";
30+
var ReactVersion = "18.3.0-www-classic-78d2e9e2a-20230208";
3131

3232
// ATTENTION
3333
// When adding new symbols to this file,

compiled/facebook-www/React-dev.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ if (
2727
}
2828
"use strict";
2929

30-
var ReactVersion = "18.3.0-www-modern-a3152eda5-20230208";
30+
var ReactVersion = "18.3.0-www-modern-78d2e9e2a-20230208";
3131

3232
// ATTENTION
3333
// When adding new symbols to this file,

compiled/facebook-www/React-prod.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -646,4 +646,4 @@ exports.useSyncExternalStore = function (
646646
);
647647
};
648648
exports.useTransition = useTransition;
649-
exports.version = "18.3.0-www-classic-a3152eda5-20230208";
649+
exports.version = "18.3.0-www-classic-78d2e9e2a-20230208";

compiled/facebook-www/React-prod.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -638,4 +638,4 @@ exports.useSyncExternalStore = function (
638638
);
639639
};
640640
exports.useTransition = useTransition;
641-
exports.version = "18.3.0-www-modern-a3152eda5-20230208";
641+
exports.version = "18.3.0-www-modern-78d2e9e2a-20230208";

compiled/facebook-www/React-profiling.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -657,7 +657,7 @@ exports.useSyncExternalStore = function (
657657
);
658658
};
659659
exports.useTransition = useTransition;
660-
exports.version = "18.3.0-www-classic-a3152eda5-20230208";
660+
exports.version = "18.3.0-www-classic-78d2e9e2a-20230208";
661661

662662
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
663663
if (

compiled/facebook-www/React-profiling.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -649,7 +649,7 @@ exports.useSyncExternalStore = function (
649649
);
650650
};
651651
exports.useTransition = useTransition;
652-
exports.version = "18.3.0-www-modern-a3152eda5-20230208";
652+
exports.version = "18.3.0-www-modern-78d2e9e2a-20230208";
653653

654654
/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
655655
if (

compiled/facebook-www/ReactART-dev.classic.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
6969
return self;
7070
}
7171

72-
var ReactVersion = "18.3.0-www-classic-a3152eda5-20230208";
72+
var ReactVersion = "18.3.0-www-classic-78d2e9e2a-20230208";
7373

7474
var LegacyRoot = 0;
7575
var ConcurrentRoot = 1;

compiled/facebook-www/ReactART-dev.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ function _assertThisInitialized(self) {
6969
return self;
7070
}
7171

72-
var ReactVersion = "18.3.0-www-modern-a3152eda5-20230208";
72+
var ReactVersion = "18.3.0-www-modern-78d2e9e2a-20230208";
7373

7474
var LegacyRoot = 0;
7575
var ConcurrentRoot = 1;

0 commit comments

Comments
 (0)