Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Internet explorer (10, 11) very slow to load Angular 2 app

My app is done thanks to Angular 2 and works fine on all browsers. However, it is quite slow to load on IE (10 and 11, I don't support below). For instance, when on Safari, Chrome and Firefox it takes ~1.5 sec to load, it takes more than 5 sec on IE (and 10 sec on Edge). I had a look at the network tab and found that sometimes it has a gap (0.5 to 1 sec) between two calls:

IE Slowness

Any idea what could delay IE between two calls?

The only lead I have may be the shims ordering in my index.html:

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>AGA Front App</title>
        <script src='@routes.Assets.versioned("lib/angular2/es6/dev/src/testing/shims_for_IE.js")'></script>
        <script src='@routes.Assets.versioned("lib/es6-shim/es6-shim.min.js")'></script>
        <script src='@routes.Assets.versioned("lib/systemjs/dist/system.src.js")'></script>
        <script src='@routes.Assets.versioned("lib/typescript/lib/typescript.js")'></script>
        <script src='@routes.Assets.versioned("lib/angular2/bundles/angular2-polyfills.js")'></script>
        <script src='@routes.Assets.versioned("lib/rxjs/bundles/Rx.js")'></script>
        <script src='@routes.Assets.versioned("lib/angular2/bundles/angular2.js")'></script>
        <script src='@routes.Assets.versioned("lib/angular2/bundles/http.js")'></script>
        <script src='@routes.Assets.versioned("lib/angular2/bundles/router.dev.js")'></script>
        <script src='@routes.Assets.versioned("systemjs.config.js")'></script>
        <script>
            System.import(path + '/assets/app/bootstrap.ts')
                    .catch(console.error.bind(console));
        </script>
like image 287
Scipion Avatar asked Oct 31 '22 01:10

Scipion


1 Answers

Multiple thoughts:

  • One way to over come is to make less HTTP calls. (concatenate all source code into one minimized JS file)
  • As you rightly said, your shims also might be getting into action that can cause the delay. Try using modernizr instead of multiple shims.

Also Refer:

YUI best practices - https://developer.yahoo.com/performance/rules.html

Run your app through Google performance rules: https://developers.google.com/web/fundamentals/performance/?hl=en

like image 113
rocktopus Avatar answered Nov 12 '22 17:11

rocktopus