Load bundles concurrently instead of consecutively

Question

We are using SystemJS to load two bundles: aurelia.js and app-build.js. SystemJs is loading them one after the other. How can we ask SystemJs to load them concurrently?

Our config.js, with details omitted for clarity, looks like this:

System.config({
  defaultJSExtensions: true,
  transpiler: "none",
  paths: {
    // omitted
  },
  meta: {
    // omitted
  },
  map: {
    // omitted
  },
  bundles: {
    "app-build.js": [
      "about.html!github:systemjs/plugin-text@0.0.3.js",
      "about.js",
      "admin.html!github:systemjs/plugin-text@0.0.3.js",
      "admin.js",
       // et cetera
    ],
    "aurelia.js": [
      "github:HubSpot/tether@1.3.2.js",
      "github:HubSpot/tether@1.3.2/js/tether.js",
      "github:Leaflet/Leaflet@0.7.7.js",
      "github:Leaflet/Leaflet@0.7.7/dist/leaflet-src.js",
      // et cetera
    ]
  },
  depCache: {
    // omitted
  }
});

Answer 1

The config.js tells the SystemJS loader in which bundle each module is located. SystemJS then lazy loads bundles as modules are needed. The reason you're seeing the above is that the dependency hierarchy is linear. Your index.html probably has a line like this:

  System.import('aurelia-bootstrapper');

So SystemJS looks for the 'aurelia-bootstrapper' model and loads the bundle that requires it. The bootstrapper than starts by loading your main.js or app.js file depending on your configuration.

The best solution

Do not separate your bundles. If you are bundling, you're likely GZipping as well, as these are both standard for a production environment and should always occur together. GZip will achieve higher compression ratios if you bundle all of your files into a single file. There's very little reason to separate your bundles, unless you didn't create the bundle yourself.

The other solution

Add a manual import of your other bundle with the 'aurelia-bootstrapper' import in your index.html.

<script>
  System.import('my-module/main');
  System.import('aurelia-bootstrapper');
</script>