Implement differential bundling

[Rich-Harris]

First stab at #280. This adds a --legacy flag to sapper build and sapper export.

When the flag is set, Sapper creates two builds, by running your client config twice — once normally, and once with process.env.SAPPER_LEGACY_BUILD === 'true'. It has no opinion about how exactly you define a legacy build, but it's easy to do in a Rollup config file. The regular build goes in client, the legacy build goes in client/legacy.

Later, when the middleware renders the page, it includes a block of code like this (except minified):

<script>
  (function(){
    try{
      eval("async function x(){}");
      var main="${main}"k
    } catch (e) {
      main="${legacy_main}"k
    };

    try{
      new Function("import('"+main+"')")();
    } catch (e) {
      var s = document.createElement("script");
      s.src="${req.baseUrl}/client/shimport@${build_info.shimport}.js";
      s.setAttribute("data-main",main);
      document.head.appendChild(s);
    }
  }());
</script>

In other words, it selects between client/client.xyz123,js and client/legacy/client.abc234.js based on whether the async keyword is supported. This is the same way Meteor defines 'modern browser'.

The thinking is that you would add the Babel plugin to your Rollup config and only run it if the env var was set. You can see what that looks like here: https://github.com/sveltejs/sapper-template-rollup/blob/babel/rollup/client.config.js (the app is deployed here, if anyone fancies verifying that it does in fact work in e.g. IE11, since I haven't had the chance to do that yet).

Does this seem like the right approach?

[kylecordes]

This seems like a great step toward a future where it "just works" out of the box on browsers new and old... which would be especially slick here because of the stark bundle size difference. That's probably too big of a step for all at once.

Here is a step to consider though: from a quick read of at least the headline for AppVeyor, that CI platform sounds like support a Windows CI run. It would be great to have the CI validate a browser support list.

[tivac]

Loaded in IE11, getting this error.

Uncaught (in promise) SyntaxError: Syntax error
   at Anonymous function (https://sapper-template-rollup-babel.now.sh/client/shimport@0.0.9.js:1:5874)
   at g (https://cdn.polyfill.io/v2/polyfill.min.js?features=default,fetch,Array.prototype.find:3:2589)
   at s (https://cdn.polyfill.io/v2/polyfill.min.js?features=default,fetch,Array.prototype.find:3:1107)
   at Anonymous function (https://cdn.polyfill.io/v2/polyfill.min.js?features=default,fetch,Array.prototype.find:3:4851)
   at r (https://cdn.polyfill.io/v2/polyfill.min.js?features=default,fetch,Array.prototype.find:3:1241)

[Conduitry]

For reference: The current issue seems to be that the client/legacy code is not actually being transpiled by babel.

[Rich-Harris]

It took me the whole bloody day but this now works in IE11: https://sapper-template-rollup-babel.now.sh/