Artboard 16Google Sheets iconSwift icon
Published at
Updated at
Reading time
1min
This post is a note that includes my thoughts about something I found online. Check it out yourself!

The support for ES modules <script type="module"></script> is quite good these days. Browsers that support them are also able to deal with modern JavaScript (arrow functions, let/const, ...). That's cool, because you can include fewer JavaScript polyfills in your ES modules.

To make that work, you have to generate two versions of your source code. One version loads as a "normal script", it targets older browsers and includes a lot of polyfills.

The second version loads as an EcmaScript module. It targets evergreen browsers and includes more or less recent JavaScript syntax.

<!-- do not include polyfills -->
<script src="evergreen.js" type="module"></script>
<!-- ship lots of polyfills and babel magic -->
<script src="old.js" type="nomodule"></script>

I'm digging this approach! Jason Miller released a nice tool called "Worth it". It helps you to figure out what the savings are when shipping "unpolyfilled bundles". It's fascinating and worth a look! The savings are not as big as I expected them to be. Maybe the module/nomodule bridge is not worth it for your site after all?

Worth it application showing 7% savings thanks to module/nomodule

Was this post helpful?
Yes? Cool! You might want to check out Web Weekly for more WebDev shenanigans. The last edition went out 15 days ago.

Related Topics

Related Articles