Why is the alpha version of Aurelia loading 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 that it took 55 seconds to load a page with 135 requests.

It seems that I need to link the jspm_packages directory first so that 543KB is loaded right away, not in chunks.

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

How do I pack packages? This is not clear to me from https://github.com/jspm/jspm-cli/wiki/Production-Workflows

And then what am I updating in my index.html file? And I still have to include the jspm_packages folder as I link to it in my 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 a bunch.

From Rob Eisenberg: "We have not finished our support support. We have been working on it."

Answer 1

This question was posted at the earliest time, but now we have a strategy that works with jspm and the system.js loader for grouping. As a side note, it doesn't follow that the structure is slowing down asset loading at an early stage due to the large number of requests (and that you probably didn't include gzip)

I copied this from my related blog post - http://patrickwalters.net/my-best-practices-for-aurelia-bundling-and-minification/

Requirements

• Understand that the jspm bundle command is used for system.js , our module loader, to know to download the package

• We understand that this applies only to JavaScript files (for now)

Create a new package

• Open a terminal and go to the skeleton-navigation folder.
• Open your config.js in a 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 

Structure

 // 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 set notes

• If you work in production, you may need to set baseUrl in config.js , as shown
• To split and maintain files individually, use jspm unbundle
• Since we used the --inject modifier, it should pick up our package and serve it without changing our script path in index.html
• You can add more files using + {filename} in the package area

Answer 2

2016 Update

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

After installation, you can configure the gulp task to handle the bundle / unsundle process. A basic example of a task is as follows:

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 wrote a more detailed 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 a r.js combining strategy for the target build of Aurelia AMD, as well as sample projects for using the package in Visual Studio with TypeScript (including aurelia.d.ts TypeScript definition file type).

• repo
• binding with r.js
• aurelia.d.ts

Using this strategy, you need to significantly reduce the download time, since it will download one file instead of many files.