|
📢 New post: The State of ES5 on the Web. For years, we defaulted to transpiling to ES5 in order to support IE. But is that still necessary? I took a look at the data to find out, and I'll just say that the results were *actually* quite surprising! 🙀 https://philipwalton.com/articles/the-state-of-es5-on-the-web/ 15 comments
@niutech my understanding is that due to the way Opera Mini compresses assets, it's never handled JavaScript sites well, regardless of what APIs they were using (which is partly why Babel has never supported Opera Mini in its preset-env plugin). So if you need to support Opera Mini then you need to make sure your site works well without JavaScript in general (a build tool is still not going to help). @philipwalton Yes, but Opera Mini at least partially supports ES5: https://caniuse.com/?compare=op_mini+all&compareCats=all so transpiling to ES5 still has some small benefit. @niutech if a site needs to support Opera Mini, then I agree it makes sense to transpile to ES5 for those users. But the point I make in my article is that you shouldn't transpile to ES5 and then just *assume* your site fully works in Opera Mini—because my guess is it probably doesn't. Opera Mini is a very particular browser, and supporting it requires manual testing. @niutech also, as an FYI in case you were curious, Babel's preset-env plugin does not support Opera Mini, see: https://babeljs.io/docs/babel-preset-env#caveats @philipwalton Fascinating, thank you for this! Is it possible that some sites served ES6+ code because they recognised Chrome (which HTTP Archive uses for the crawl) BUT would serve purely ES5 code to (say) IE11? I've no idea how common this would be in practice, but I remember plenty of recommendations in the past about doing this sort of thing. @yoz it's possible, but... 1) When I tested the 20 sites in IE 11, all of the ones I tested had numerous script parse errors for the same URLs that I saw in my query results. 2) Even if a site were doing this, the fact that they were serving ES5 helper code to Chrome UAs is still not optimal. @philipwalton Thank you, #1 is what I was looking for. You mention this in a paragraph in the blog post, but the phrasing leaves it slightly ambiguous about whether what you did in IE11 was browse the sites *or* load the Chrome-served code bundles. (Sorry if that sounds kind of nonsensical.) @yoz yeah, I loaded them in IE 11 via BrowserStack. And looking at the phrasing, I agree it's not 100% clear, so I'll update it. Thanks for the feedback! @philipwalton Very interesting investigation! What I feel like I'm missing is how many users are in practice still using browsers without ES2015+ support. I know @ljharb knows about similar Node.js data, maybe they also know about browser usage? I otherwise completely agree that the state where websites think they support ES5 browsers but don't is a problem. @jfmengels @ljharb according to caniuse (which is based on Statcounter data), it's 97% of users: https://caniuse.com/es6 Personally, I'm skeptical of the accuracy of Statcounter data, but regardless I still maintain that browser support is something that sites should be deciding for themselves based on their own data—not based on somebody else's data that may or may not be representative of their user base. @philipwalton @jfmengels every job I’ve had, the internal data did not match caniuse/statcounter. @philipwalton Do you know of any bundle analysis tooling that covers this ES5/6 gap? I also think about stuff like SVGs that sneak into bundles and tanks performance. Or like Jake's post about a setTimeout in an IFFE. Is there a Lighthouse for bundles? Most bundle analyzers I see are just tree-graphs, which is helpful but not critical about how much "over-compiled" code has leeched into your build. @davatron5000 There is a `legacy-javascript` audit in Lighthouse that's been there for a while, though it doesn't seem like that many people are aware of it (and I also couldn't find a documentation page for it, so maybe that's partly why?). @philipwalton Oh gosh. Yeah. This is great. I guess I haven't seen this in quite some time so I forgot about it. Mayhaps I write a post about it so it gets more attention. |
Gregory's Server
@philipwalton ES5 is not only IE11, but also Opera Mini, which is still popular in the third world: https://raddevon.com/articles/where-are-opera-mini-users/