Please read my first post for an introduction.
In this post, I will cover bundling. I’ll try not to cover what Rob Eisenberg has already blogged about - please read that post for a good introduction.
My first port of call is creating the Aurelia file which will control what is bundled. Lets talk through that file.
First we get the Aurelia CLI and register a bundle command. The long-term intention seems to be that you could register multiple commands to set up parts of the project. I find this a bit strange, given the heavy use of other tools and
that the example project uses gulp, I would have thought concentrating on making a
gulp-aurelia-bundler would have made more sense.
We list the things we want to be included - it seems
and after that we specify the projects top level dependencies, which includes those and their sub dependencies.
inject option specifies that the
config.js file should be modified during bundling to include a reference to the bundle. More on that later.
Lastly, we specify our html templates and bundle them into the dist folder also. The inject places a reference to the bundle into our
This looks like this..
Which means the index.html (which contains things written by me as well, it is not auto generated) is modified to be used in a bundling scenario.
config.js file (which is loaded by the site) to include a bundling definition..
Which means that systemjs will look in the bundle file for those packages. It again means that the
config.js file can no longer be used in a non-bundled scenario.
The Aurelia team are working on API, but for now it seems the way to get bundling to happen inside gulp is to exec the
So, I make a command to run
However, this currently takes 13 seconds on my system - not something I want to include as part of a watch task, happening every time a change is made.
In addition, the setup seems a bit strange - JS source and HTML is transpiled into the dist folder, but then the bundle is built from the dist folder, meaning the bundled and un-bundled files end up in the same folder.
I’ve raised these concerns with the team and hopefully things will improve - bundling is a new thing for Aurelia CLI and it will probably take some time to get the process right.
For now, I’ve created a process to copy the modified files to a new directory (for release purposes) and then run
git checkout in order to revert my files.
Which seems to work well, giving me a bundled version in one directory and non-bundled in another. Now if I look at the bundled site I see eight requests (one of which is less loaded by the app). Note, this is on an external server, which is why the load time is longer than non-bundled - but this was previously taking 12 seconds, so it is much improved.
Someone has already raised an issue to investigate how the remaining files could be bundled together.
It still seems slow, and doing a flame chart in chrome seems to suggest it is being caused by the systemjs and es6-module-loader (the purple and mauve colours).
I hope this corresponds to Rob Eisenberg’s comment on my previous post.
… a system.js bug that also affects all the transpilers: TypeScript, Babel and Traceur. It causes exponential module lookup in certain scenarios. It’s actually a problem with the spec we helped identify a few weeks back. The fixes are being worked on, so once that hits things should load faster.
Firefox and IE
I then tried the site in Firefox and found it didn’t load.
Which seems to be because optional dependencies are not included in the bundle by default. The solution for now, is that optional dependencies have to be specified manually. In this case adding
"github:email@example.com/HTMLImports.min" to my Aureliafile helped and Firefox loaded, but then I got another problem with IE because
"aurelia-html-template-element" is also optional and only required in IE.
Lastly, I tried IE9, which seemed incredibly slow. I couldn’t profile it because every time I profiled the site stopped working. Luckily for me, this site is for developers, so I hope the number of IE9 users will be minimal.
Comparing the bundled files sizes..
- Code Mirror - 171KB minified, 60KB GZip’d
- Aurelia and dependencies (excluding the modules I removed) - 295KB minified, 71KB GZip’d
- optional polyfills - 23KB minified, 7KB GZip’d
- total less2css app bundle - 500KB minified, 139KB GZip’d
For comparison, Angular 1.4.1 is 142KB minified and 53KB GZip’d, so looking at the GZip’d versions, there doesn’t seem to be an order of magnitude in size difference. The core-js bundle (providing es-x polyfills) on its own is 89KB minified and even with angular 1 you would probably want to include at least some es6 shims.
Aurelia is still preview and performance optimisation will be left to the end, so don’t take this as a no for production sites, but I think its probably a “not yet”. That may change soon though, if the problems are down to systemjs.