Aurelia javascript dependencies loading time [duplicate] - aurelia

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/bootstrap#3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="jspm_packages/npm/font-awesome#4.3.0/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
Understand that a jspm bundle command is used to let system.js, our module loader, know to load the bundle
Understand this only covers the JavaScript files (for now)
Create a new bundle
Open your terminal and navigate to your skeleton-navigation folder.
Open your config.js in your text editor
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
If you are serving in production you may want to look at setting baseUrl in your config.js like that
To unbundle and serve files individually use jspm unbundle
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
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

Answer 3

There is a GitHub repository that includes an r.js bundling strategy for the Aurelia AMD target build, as well as sample projects for using the bundle in Visual Studio with TypeScript (including an aurelia.d.ts TypeScript type definition file).
repo
bundling with r.js
aurelia.d.ts
using this strategy should dramatically reduce your load time as it will be loading one file instead of many files.