Framework: The startup of Aurelia in IE 11 is slow

[jinwangchina]

I'm submitting a bug report

• Library Version:
  aurelia-framework 1.0.7

Please tell us about your environment:

• Operating System:
  Windows 7

• Node Version:
  7.4.0

• NPM Version:
  4.0.5

• JSPM OR Webpack AND Version
  webpack 2.2.0

• Browser:
  IE 11

• Language:
  TypeScript 2.1

Current behavior:
The startup of Aurelia in IE 11 is slow, it takes around 5 seconds while less 1 second in Chrome.
You could use "skeleton-typescript-webpack" to reproduce the performance issue.

Expected/desired behavior:
Performance improved

[fgambino]

Are you using Bluebird for promises? Make sure longStackTraces is explicitly set to false too.

[Thanood]

Also, make sure you don't use a "development" version of bluebird. AFAIK long stack straces is hard-coded in dev builds.. 😕

The .min.js versions aren't dev versions.

[jinwangchina]

Hi @fgambino ,
Thank you, you are right, I changed my Bluebird setting to the following, IE starts as fast as Chrome.
Bluebird.config( { warnings: false, longStackTraces: false } );

Hi @Thanood ,
I am not using "development" version, thanks for your comment.

[Infuser]

Completely new to bluebird what file does the Bluebird code go in

Thanks

[AshleyGrant]

@Infuser are you using the Aurelia CLI, webpack, or JSPM/SystemJS?

[Infuser]

Hi Ashley

I am using the original esnext skeleton using jspm/systemjs

Thanks

[Infuser]

Like this?

[Infuser]

I found the code above in another post, I tried it but was getting config undefined

Realised I needed to load bluebird after babel polyfils

Load times in IE now down from 10 seconds to 1

[AshleyGrant]

Awesome!

[esnyder232]

@Infuser Hey,

We are actually having the same problem. We tried to putting it in the script tag like you but it looked like it wasn't doing anything. We are also babeling our stuff from es6 to es5.

How did you load bluebird AFTER babeling?

[Infuser]

Hi @esnyder232 code in my index.html

`

`

[Infuser]

Also to be on the safe side I did it again in main.js not sure if its needed

`import {
Promise,
P
} from 'bluebird';
import 'bootstrap';
import $ from 'bootstrap';
import 'whatwg-fetch';
import {
HttpClient
} from 'aurelia-fetch-client';
import {
I18N
} from 'aurelia-i18n';
import XHR from 'i18next-xhr-backend';

Promise.config({
warnings: {
wForgottenReturn: false
},
cancellation: true,
longStackTraces: false
});

Promise.setScheduler(function(fn) {
setTimeout(fn);
});

export function configure(aurelia) {`

[AshleyGrant]

You don't need to do this in main.js, in fact it should throw an error to the console when you do this.

[esnyder232]

@Infuser
Still not seeing an improvement for some reason.
We included the bluebird in the index.html and put it in the main.js as well.
Here is what our index looks like:

Here is our main.js:
import AuthService from 'AuthService';
import {Promise, P} from 'bluebird';
Promise.config({
warnings: {
wForgottenReturn: false
},
cancellation: true,
longStackTraces: false
});

Promise.setScheduler(function(fn) {
setTimeout(fn);
});

export function configure(aurelia) {
...
}

We noticed you had a polyfill included before bluebird. Is that library necessary? We were thinking it was included for your specific project, but not really sure.

Also, is there a way to confirm the stack trace is actually turned off? Like is it visible in the profiler tab when its turned on?

Any help is greatly appreciated :).
Thanks!

[AshleyGrant]

@esnyder232 putting the code in main.js won't help, as Bluebird cannot be configured after any promises have been created, and promises are created while bootstrapping Aurelia.

[esnyder232]

@AshleyGrant thanks, I removed it.

Also I asked if we can confirm the stack trace is turned off because we are also having a performance issue with bringing up details on some of our pages, particularly pages that have alot of repeat.fors in the html.

There is another thread we're looking that has this same solution (make longStackTraces: false) and it apparently solves the performance issue:
https://github.com/aurelia/templating/issues/448

jdanyow said in the thread he can "see that a significant amount of time was spent by bluebird capturing the stack trace information." But I'm not sure how to see that...

I'll ask in that thread as well.

Also in our index.html, we are importing system.js before bluebird.min.js. Does anyone know if this order matters?

[AshleyGrant]

Yeah, you need to swap that order so that SystemJS (which heavily uses Promises) can use Bluebird for promises.

[Infuser]

Thanks Ashley did not notice a console error but maybe

Found that code in a different post

Good to know it's not needed I will remove

Think I am using babel poyfill for async await calls, but it was all new to me as of 6 months ago so not sure

[alankila]

I ran into this as well, in form of visibly slow startup of the site in IE11, and unusably slow rendering of search result list that maximally contains 100 elements in a repeat.for list. Disabling long stack traces fixed this issue. It seems to me that Aurelia ought to disable this feature when not explicitly used in development mode.