My angular 2 app takes a long time to load for first time users, I need help to speed it up

To have something ready for production (and speed it up), you need to package it.

I mean transpiling all files into JavaScript ones and concat them the same way Angular2 does for example. This way you will have several modules contained into a single JS file. This way you will reduce the number of HTTP calls to load your application code into the browser.

As a matter of fact, for the following configuration of SystemJS, you will have one call per module (it’s suitable for development but not really efficient in production):

    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

This answer could give hints about how module resolution works:

  • How does Angular2 resolve imports?

You can do this packaging using Gulp and its plugins:

  • https://www.npmjs.com/package/gulp-tsc
  • https://github.com/contra/gulp-concat

See the following answers:

  • Using Gulp to Concatenate and Uglify files
  • https://github.com/JavascriptMick/angular2-gulp-typescript/blob/master/gulpfile.js

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)