Framework: aurelia start very slowly

[tomsean]

I open aurelia in chrome, start very slowly,and then I open the some app in mobile ,it is used 29.56s.what happen.

[EisenbergEffect]

Recently we discovered a design flaw in the System.register ES6 module
format that caused long load times. We have reported this to the SystemJS
team. They have identified a fix. However the fix requires work on each
transpiler because part of the bug is in the implementations of Babel,
TypeScript and Traceur.

So, the bulk of the problem is outside Aurelia. It actually affects any and
all code transpiled into System.register format. We are hopeful that this
will get fixed quickly.

All this aside, we are working on some improvements to Aurelia itself which
will also speed up startup time.

Please stay tuned. We are trying to work with other projects on this since
it affects all JS written with these tools, not just Aurelia.
On Jun 18, 2015 11:35 AM, "tommy" [email protected] wrote:

I open aurelia in chrome, start very slowly,and then I open the some app
in mobile ,it is used 29.56s.what happen.

[image: aurelia1]
https://cloud.githubusercontent.com/assets/5907239/8228249/e0bb5096-15df-11e5-8b39-601f442745d2.png
[image: aurelia_mobile]
https://cloud.githubusercontent.com/assets/5907239/8228281/24f05bda-15e0-11e5-95b7-fe014247586a.png

—
Reply to this email directly or view it on GitHub
https://github.com/aurelia/framework/issues/136.

[EisenbergEffect]

This was an issue with the system module format...a bug in the spec actually that caused this problem. So, it was outside of Aurelia and affected all apps that use the system.register format. We have switched format and improved our build process go get around this issue. Startup time is _much_ faster.

[hadrienl]

As you can see in this video, loading aurelia.js on a bundled app is very slow even on the very last release: https://www.dropbox.com/s/k2k55ag5zr4sezh/ch-slow.mov?dl=0
Why?

[EisenbergEffect]

I would recommend that you move to require.js or webpack. You'll likely see an immediate improvement.

[AshleyGrant]

Yeah. Aurelia isn't the problem. You can see it in this screengrab I took of a cold load (all caches cleared) in Chrome of the Aurelia hub:

[hadrienl]

Does Webpack will become the recommended foundation?

[EisenbergEffect]

We're going to make a strong recommendation of either using the CLI or Webpack. Eventually we hope to add Webpack support to the CLI so then you would pick our build system or the Webpack system. We might even default to Webpack by that time.

[glen-84]

@EisenbergEffect Is jspm/systemjs really that bad? If so, are there any open issues that I can subscribe to?

[hadrienl]

It seems that my app load faster by replacing babel-polyfill by regenerator/runtime…

[dpinart]

@EisenbergEffect If i'm not wrong, a few weeks ago, in another issue (I've not been able to find it) you commented about some inconvenients about using webpack. What has changed since then so you are now considering to use Webpack by default?

[EisenbergEffect]

@dpinart The next release of webpack plugins for Aurelia addresses all known issues. We've been doing a lot of work in that area.

[dpinart]

Great!! I found webpack 1.0 a bit confusing. Hopefully aurelia-cli will be able to facade it and offer us a simple solution.

It's a bit crazy, a least for me, to decide wich loader to use. I like jspm/systemjs but it seems it has several performance and compatibilities issues, maybe this is the mid/long term option. Requirejs seems to be the more mature option right now and in conjunction with aurelia-cli it's really easy to define bundles (very similar to jspm bundles). About webpack I'm expectant with the next release

[insidewhy]

We ported from jspm/system.js to webpack but startup time is still more than 3 seconds on a high powered mobile device.

[insidewhy]

We get a decent startup speed on desktop computers with both... mobile phones are where things are really painful.

[hadrienl]

I just replaced jspm by aurelia-cli/requirejs and you're right : it's really quicker!

[dpinart]

We recently got back to jspm/systemJS from webpack. Webpack 1.0 has some constraints we couldn't deal with and it's a bit confusing, at least for me, how bundles are created. JSPM allows us to manage bundles and we can create one that only contains strictly what we need to show login screen in a cordova app. Right now, app start time is quite decent, less than 2 seconds since user taps on the app icon until he sees login screen. We have a bundle with aurelia-framework and all required plugins that weighs more than 400Kb... I'd like a lighter aurelia but I also want many features...

Haven't tested aurelia-cli/requirejs, I was thinking about giving it a chance once it moves away from alpha. @EisenbergEffect commented that they were planning to add Webpack (new version) support in aurelia-cli and that they were thinking about making aurelia defualts to webpack...

I think I'll wait a bit to see how aurelia-cli evolves and will decide. Meanwhile, we're still on jspm/systemjs

[lukehutch]

I keep coming back to evaluate Aurelia for new projects, as the design of Aurelia is amazing, but the startup time is currently prohibitive.

Studies at Google, Bing and elsewhere have indicated that you can lose almost 5% of user conversions if you increase above-the-fold latency by 2 seconds, or you reliably lose 1% of traffic if you increase page load latency from 100ms to 400ms. Separately from that, latencies of over 100ms from click to page render cause subconscious frustration and incur a cognitive burden. Unfortunately the main conclusion I can draw from http://builtwithaurelia.com/ is that Aurelia apps currently need a splash screen so the user doesn't hit Back before the page loads.

It sounds like switching to requirejs or WebPack improves the situation, but what is the actual performance target? Can more be done to implement deferred loading or deferred initialization in Aurelia, so that the page content comes up fully rendered as quickly as possible?

[AshleyGrant]

@lukehutch, you're blaming Aurelia for SystemJS's performance issues. Most of the apps listed on http://builtwithaurelia.com are using SystemJS. Some of them are actually quite fast on second load when everything is cached and SystemJS is slowing things down.

I personally have been blown away at how fast Webpack is, even in development mode. That being said, there is definitely more work that can be done to make Aurelia faster on initial load. This will like be an ongoing goal for the team, as there's always going to be something we find that can make Aurelia apps load quicker.

[hadrienl]

@lukehutch splash screens are a UX problem. I replaced splash screen by a global UI placeholder and the wait seems very quicker : https://www.dropbox.com/s/slmshjltr5jadtm/ch-loading.mov?dl=0
And as I said later, I gain 2 secs by replacing jspm/systemjs by aurelia-cli/requirejs.

[lukehutch]

@hadrienl I agree, splash screens are not generally considered good modern UX. It is unfortunate that the Aurelia demos use splash screens, because that translates to most things that are being built in Aurelia also using splash screens.