0

Presently many browsers do support most ES 6 features. So instead of transpiling to ES 5 with babel for all browsers, I want to detect if a browser supports a feature. If it does I use the feature else I use the ES 5 alternative. But that is a lot of work for something so trivial. Is there a package or software that helps with that?

Ore Adeleye
  • 13
  • 2
  • Yes, this is something I always looked for. In the end I created my own build system. It works by getting the browser to send what features is has, and then I do a custom build for these features. The problem with other build systems I've seen like say webpack you have to build to a the lowest denominator. By doing this even if some user has IE6, and what I'm doing can be Babel compiled or poly filled, I don't need to worry, yes they may need to download 500K more JS, than say a fully ES6+ browser, but at least it will still work. – Keith Jun 16 '20 at 12:06
  • The ng cli does this and calls this [differential loading](https://angular.io/guide/deployment#differential-loading) using `nomodule` and `type=module` on the script tags. That tells the browser to ignore a script tag if it supports modules and older browsers will ignore scripts with `type=module`. See https://stackoverflow.com/a/45947601/227299 and https://jakearchibald.com/2017/es-modules-in-browsers/ – Ruan Mendes Jun 16 '20 at 12:10
  • @Keith my experience is that the bundles are not that much smaller, I definitely don't save 500K. `15406534 main-es2015.js` and `16072488 main-es5.js` – Ruan Mendes Jun 16 '20 at 12:14
  • @JuanMendes That looks interesting, the only thing I would say it's not very finely tuned. Your either ES5, or ES2015, any new features in 2016/17/18+++ will then still need trans-piling & potentially pollyfilled. But still better then everything been ES5. Try getting a fancy modern application in IE6 working, depending on what your doing 500K is easy doable compared to a pure ES2019. Saying that IE6 should really be buried, but was just using it as a point. – Keith Jun 16 '20 at 12:18
  • @Keith "*then I do a custom build for these features*" - I hope you're caching these, and have only a few versions around instead of doing a full artifacts build on each request? – Bergi Jun 16 '20 at 14:58
  • @Bergi Yes, I cache the compiler and dependancies etc in SQLite databases. I use hashes for everything to keep build times fast. Yes, certainly don't do artifact build on every request, only when a new browser feature detected. To help with development use file watches and webSockets for auto refresh. Of course one issue is on the first view of a set of features, there is extra delay, but I do show a loading indicator when this is required. – Keith Jun 16 '20 at 16:10

0 Answers0