Making a Difference with Differential Serving
A presentation at Smashing Conference in in San Francisco, CA, USA by Jeremy Wagner
Much of the JavaScript that powers our apps is transformed from the elegant ES6 you write to a tangled mess of transformed and polyfilled code. Only legacy browsers actually need those transformations, yet it's a safe bet that you're serving that code to modern browsers as well. That means we're sending a lot of extra JavaScript to users that just don't need it!
Now what if I told you—and just hear me out—that your app could send a bundle with less polyfills and transforms while legacy browsers still get the bundle you're already serving them now? This technique is called differential serving. In this live coding talk you'll learn how differential serving can seriously reduce the amount of JavaScript you send to modern browsers—all while preserving the existing experience you have for legacy browsers! Drop into this session to get practical advice on how to modify your toolchain to spit out both modern and legacy babel-fied bundles, and how to serve those bundles the right way to your users.
for free. You
can too.
Resources
The following resources were mentioned during the presentation or are useful additional information.
-
Talk Github repo
Contains all the code and steps (as git tags) for what I did in the talk.
-
Deploying ES2015+ Code in Production Today
A resource by Phil Walton that discusses how to achieve differential serving with Babel 6.
-
Doing Differential Serving in 2019
A longer form article I wrote as an update to Phil Walton’s differential serving article.
-
@babel/preset-env Documentation
The documentation for @babel/preset-env, covering all configuration options.
Buzz and feedback
Here’s what was said about this presentation on social media.
