5 ms·

Could you compare your JS's bundle sizes before and after? I've heard that its little smaller, I've been wondering how much. Edit: I've got it in announcement:

by Ralfp 9y ago

Could you compare your JS's bundle sizes before and after? I've heard that its little smaller, I've been wondering how much. Edit: I've got it in announcement: React is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped). react-dom is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped). react + react-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped 15kb shaved in production builds. Thats quite nice!

realityking 9y ago
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...

by Ralfp 9y ago

realityking 9y ago

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...