Only serve transpiled assets for old browsers

[balloob]

Transpiled code is obfuscating the intention of our JavaScript code. This leads to a bigger file size and to JavaScript engines not being able to optimize as much.

Approach taken from https://philipwalton.com/articles/deploying-es2015-code-in-production-today/ (found it via talk from Chrome Dev Summit)

<!-- Browsers with ES module support load this file. -->
<script type="module" src="main.js"></script>

<!-- Older browsers load this file (and module-supporting -->
<!-- browsers know *not* to load this file). -->
<script nomodule src="main-legacy.js"></script>

For frontend.html, this saves us almost 100kb !

File sizes with transpilation:

File sizes without transpilation

[balloob]

Note, minification was done with babel-preset-minify because uglifyjs doesn't support ES2015. Running that preset on transpiled code will result in bigger files than uglifyjs:

Transpiled and minified with babel-preset-minify

[balloob]

When we start to distinguish between transpiled / not transpiled, it will also be easy to start adding polyfills by default to the transpiled version but keeping the ES2015 version lean.

[andrey-git]

There is uglify-es for es6
The article says to special-case Safari10

[andrey-git]

Btw according to caniuse - type="module" is not supported by FF: http://caniuse.com/#feat=es6-module
Maybe use a traditional useragent-based approach?

[balloob]

Yeah I would be fine with that too.

[balloob]

This has been implemented by Andrey.