DEV Community

Discussion on: Understanding the Modern Web Stack: Babel

Collapse
 
srikanth597 profile image
srikanth597

Nice article,
Well as u said Transformation is needed in older browser, as a dev let's we need to supporting older browsers as well.
Will this not be an impact for a user running latest browser?
Because ES5 syntax and lot of overhead functions on top of it in your bundle.
What iam basically trying to understand is is there any way that we can give ES5 bundle for not supported ones, and ES6 bundle for latest browsers based on User Request during run-time?

Collapse
 
alexeagleson profile image
Alex Eagleson

That's a great question! Yes doing that is absolutely possible, it's just one of those things that really comes down to a decision about whether the effort is worth the payoff.

Basically the process would be to have two separate babel configuration files, and generate separate builds, one aimed at modern browsers and one aimed at legacy browsers. Your target would decide the definition of what modern and legacy means to you.

You would then upload both bundles to your server and have custom code on the server side that decides which one to serve to the user based on the User-Agent header of their HTTP request:

developer.mozilla.org/en-US/docs/W...

So it's very do-able, just adds extra overhead so it's a matter of weighing the pros vs cons. In my experience personally, the extra ES5 overhead has never been enough to impact performance to the point where we've bothered to run two separate builds, but that's not to say the requirements might be different for another organization.

Cheers!