4 ms·

Unfortunately pulling in the now required polyfills for ES6 Map and Set can add 40kb :/ (the 40kb are with core-js, will need to look for something smaller)

danabramov 9y ago
They're only required if you target IE10 or lower.
- Bahamut 9y ago
  Some older versions of Safari as well I believe since Safari had shipped a broken implementation prior to becoming ES2015 compliant.
  - danabramov 9y ago
    If you have specific data about what was broken please share in an issue report so we can amend the docs if necessary. Thanks!
    - Bahamut 9y ago
      Here is one issue where I saw some comments on the broken Map implementation: https://github.com/google/traceur-compiler/issues/1810 https://github.com/google/traceur-compiler/issues/1810 Admittedly, this is an older browser at this point (Safari 11 formally shipped yesterday), but I remember it biting a workplace I was at 2 1/2 years ago & we had to polyfill Map and Set. I believe this was fixed in Safari 9. I would like to report it on GitHub, but unfortunately I think it would violate my employment contract until I complete the process to get approval to do open source work.
- realityking 9y ago
  Does that mean React is only using the save subset of Map/Set methods that are supported by IE11? That'd one great news and should be documented.
spicyj 9y ago
Good realization. We were already using Map/Set polyfills in our apps so didn't notice the cost as much. I imagine it should be possible to polyfill with a much smaller footprint; maybe we can find another to recommend. As Dan notes Map+Set polyfills are also not needed in newer browsers.
chrismorgan 9y ago
For Topicbox (which doesn’t use React, but that’s irrelevant), I decided a good signal to check was Object.values; if it’s missing, we include core-js. Thus, older browsers (IE, Safari≤10.0, iOS≤10.2, Chrome≤53, Firefox≤46 and Edge≤13?) will pull that in, but recent versions of all browsers won’t need the weight (the check is very light, and the overhead roughly `Object.values||require('core-js')`), and you have a solid and dependable ES6+ base to build on.
- realityking 9y ago
  I assume you're then dynamically loading core-js when it's required? Dynamic module loading is something we've avoided so far, maybe we need to start looking into that.
  - chrismorgan 9y ago
    This article may interest you: https://philipwalton.com/articles/loading-polyfills-only-when-needed/ https://philipwalton.com/articles/loading-polyfills-only-whe... Also on being able to use new syntax: https://philipwalton.com/articles/deploying-es2015-code-in-production-today/ https://philipwalton.com/articles/deploying-es2015-code-in-p...

danabramov 9y ago

They're only required if you target IE10 or lower.

Bahamut 9y ago
Some older versions of Safari as well I believe since Safari had shipped a broken implementation prior to becoming ES2015 compliant.
- danabramov 9y ago
  If you have specific data about what was broken please share in an issue report so we can amend the docs if necessary. Thanks!
  - Bahamut 9y ago
    Here is one issue where I saw some comments on the broken Map implementation: https://github.com/google/traceur-compiler/issues/1810 https://github.com/google/traceur-compiler/issues/1810 Admittedly, this is an older browser at this point (Safari 11 formally shipped yesterday), but I remember it biting a workplace I was at 2 1/2 years ago & we had to polyfill Map and Set. I believe this was fixed in Safari 9. I would like to report it on GitHub, but unfortunately I think it would violate my employment contract until I complete the process to get approval to do open source work.
realityking 9y ago
Does that mean React is only using the save subset of Map/Set methods that are supported by IE11? That'd one great news and should be documented.

spicyj 9y ago

Good realization. We were already using Map/Set polyfills in our apps so didn't notice the cost as much. I imagine it should be possible to polyfill with a much smaller footprint; maybe we can find another to recommend. As Dan notes Map+Set polyfills are also not needed in newer browsers.

chrismorgan 9y ago

For Topicbox (which doesn’t use React, but that’s irrelevant), I decided a good signal to check was Object.values; if it’s missing, we include core-js. Thus, older browsers (IE, Safari≤10.0, iOS≤10.2, Chrome≤53, Firefox≤46 and Edge≤13?) will pull that in, but recent versions of all browsers won’t need the weight (the check is very light, and the overhead roughly `Object.values||require('core-js')`), and you have a solid and dependable ES6+ base to build on.

realityking 9y ago
I assume you're then dynamically loading core-js when it's required? Dynamic module loading is something we've avoided so far, maybe we need to start looking into that.
- chrismorgan 9y ago
  This article may interest you: https://philipwalton.com/articles/loading-polyfills-only-when-needed/ https://philipwalton.com/articles/loading-polyfills-only-whe... Also on being able to use new syntax: https://philipwalton.com/articles/deploying-es2015-code-in-production-today/ https://philipwalton.com/articles/deploying-es2015-code-in-p...