4 ms·
> Rather than eagerly loading the react-scroll dependency for this, they load it on interaction with the button, saving ~7KB: My apologies for being negative b
by jkcxn 6y ago
> Rather than eagerly loading the react-scroll dependency for this, they load it on interaction with the button, saving ~7KB:
My apologies for being negative but isn't it crazy it takes 7KB to scroll to the top of the page?
- lhorie 6y agoEh, you can always do `scrollTo(0, 0)` if you just want the scroll-to-top functionality at the expense of everything else.
- jamescostian 6y agoBut if you want a good user experience, you should really use `scrollTo({ top: 0, left: 0, behavior: 'smooth' })` Smooth scrolling in 42B (minified, not gzipped) rather than 7KB, and supported by 85% of users' browsers (source for that number: https://caniuse.com/mdn-api_scrolltooptions https://caniuse.com/mdn-api_scrolltooptions)
- lhorie 6y agoYeah, that's a good option if you're ok with not-100% browser compatibility.
- Etheryte 6y agoModern browsers support `scrollTo(options)` that allows you to do it with a single line. For slightly older browsers, such as later IE releases, you need to try-catch that and use `scrollTo(x, y)`. And for older browsers still, not-the-latest IE, Opera mobile, that's the rest of the 7KB — polyfills, hacks, wrappers and more. Shortly, for browsers that don't have an animation API nor a proper scrolling API. It may be disproportionate, but for sites that want to target readers all around the world, on all devices, it can be a sensible tradeoff.
- maxxk 6y agoIn this case better solution would be to use this single line (which works for >80% of clients) with try-catch in core and maybe load polyfills from exception handler via "bloat dispatcher".
- darepublic 6y agoIt's not just browser support right it's however they wrapped it up to make it more compatible with react