Why does the alpha version of Aurelia load slowly?

Question

I wrote a minimal test page to try out Aurelia.

http://www.andrewgolightly.com/

GitHub: https://github.com/magician11/ag-landingpage

My last test, showed it took 55 seconds to load the page with 135 requests.

It seems I need to bundle the jspm_packages directory first so that the 543KB gets downloaded at once.. and not in pieces.

So given I followed this example: http://aurelia.io/get-started.html

How do I bundle the packages? It's not clear to me from https://github.com/jspm/jspm-cli/wiki/Production-Workflows

And then what do I update in my index.html file? And I'll still need to include the jspm_packages folder as I reference it in the head, right?

<link rel="stylesheet" href="jspm_packages/github/twbs/[email protected]/css/bootstrap.min.css">
<link rel="stylesheet" href="jspm_packages/npm/[email protected]/css/font-awesome.min.css">

Thanks.

Update

The team is working on bundling..

From Rob Eisenberg: "We aren’t finished with our bundling support just yet. We’re working on it."

Answer 1

This question was posted at a very early time but we do have a strategy now in place that works with jspm and system.js loader for bundling. As a note it's not that the framework is slow it's that the loading of assets was taking a while early on due to the high number of requests (and that you probably didn't have gzip enabled)

I've copied this from my blog post on the subject - http://patrickwalters.net/my-best-practices-for-aurelia-bundling-and-minification/

Requirements

1. Understand that a jspm bundle command is used to let system.js, our module loader, know to load the bundle

2. Understand this only covers the JavaScript files (for now)

Create a new bundle

1. Open your terminal and navigate to your skeleton-navigation folder.
2. Open your config.js in your text editor

3. Run this command -

   jspm bundle '*' + aurelia-skeleton-navigation/* + aurelia-bootstrapper + aurelia-http-client + aurelia-dependency-injection + aurelia-router dist/app-bundle.js --inject --minify
   

Breakdown

// Create a bundle
jspm bundle 
    // Bundle all of these paths
    // from my config.js 
    '*' +
    aurelia-skeleton-navigation/* +
    aurelia-bootstrapper +
    aurelia-http-client + 
    aurelia-dependency-injection + 
    aurelia-router
    // Create the bundle here
    // with this name
    dist/app-bundle.js
    // These modifiers tell the bundle
    // to both minify and then inject
    // the bundle
    --inject
    --minify

Additional notes on bundling

1. If you are serving in production you may want to look at setting baseUrl in your config.js like that
2. To unbundle and serve files individually use jspm unbundle
3. Since we used the --inject modifier system.js should pick up on our bundle and serve it without changing our script path in index.html
4. You can add more files by using + {filename} in the bundle area

Answer 2

2016 Update

The official toolkit for bundling aurelia applications can be installed via npm using npm install --save-dev aurelia-bundler.

Once installed, you can set up a gulp task for handling the bundle / unbundle process. A basic example of a task looks like this:

build/tasks/bundle.js

var gulp = require('gulp');
var bundler = require('aurelia-bundler');

var config = {
  bundles: {
    'dist/app-build': {
      includes: [
        '**/*.js'
      ],
      options: {
        minify: true
      }
    }
  }
};
gulp.task('bundle', ['build', 'unbundle'], function() {
  return bundler.bundle(config);
});
gulp.task('unbundle', function() {
  return bundler.unbundle(config);
});

I've written a more in-depth article here: http://www.foursails.co/blog/aurelia-bundling/

The official documentation can be found here: https://github.com/aurelia/bundler