Description
We currently build DevTools to target Chrome 49 and Firefox 54. These are super old browser versions and they did not have full ES6 support, so the generated build is more bloated than it needs to be.
DevTools uses most modern language features. Off the top of my head, the following features are used (basically everything but async and generator functions):
| Feature | Chrome support | Firefox support |
|---|---|---|
let and const |
49 | 36 |
Map, Set, and WeakMap |
36 | 6 |
| Arrow functions | 45 | 22 |
| Classes | 49 | 45 |
| Template strings | 41 | 34 |
Symbol() |
38 | 36 |
| Spread operator | 60 | 55 |
| Destructuring assignment | 60 | 55 |
| For-of operator | 38 | 13 |
Object.assign |
45 | 34 |
Promise |
33 | 29 |
The above min browser versions come from caniuse.com. Assuming I'm not forgetting things, it looks like we'd need to target Chrome 60+ (released 2017-07-25) and Firefox 55+ (released 2017-04-18). This seems like a reasonable set of browsers to target.
Interestingly enough, according to caniuse.com, Chrome 51 and Firefox 54 are mostly ES6 compliant but I think certain details (like spread in object literals) weren't included in the original spec and/or weren't added until later.
Note that we can't remove the IE 11 target from the react-devtools-core backend yet due to Hermes (React Native) ES6 support but that should be doable by the end of the year given current engineering targets. But we could update the frontend target, as well as the targets for the extensions and the react-devtools-inline package.
It would be good to increase the browser versions we target to at least the version numbers mentioned above, rebuild the DevTools, and compare bundle sizes and generated code.