Ionic 2 speed up boot time?

Where do I do this excactly?

I’m not sure that tuning build system will speedup soooo much loading time. For that reason people use server side rendering for initial view for ng2 apps.

To prevent server requests to templates
I use gulp-angular-embed-templates to embed all templates in ts files:

I do:

gulp prod

additional code for gulpfile is:

var embedTemplates = require('gulp-angular-embed-templates');

 gulp.task('prod', function(done){
  runSequence(
    ['sass', 'html', 'fonts'], 
    'move1',
    'clean1',
    'embed', 
    'compile', 
    'clean2',
    'move2',
    'clean3' 
);});

 gulp.task('move1', function(done){
  return gulp.src(['./app/**/*.*'], { base: './app/' })
  .pipe(gulp.dest('__app'));
});

 gulp.task('clean1', function(done){
  return del('app');
});


 gulp.task('clean2', function(done){
  return del('app');
});


 gulp.task('move2', function(done){
  // the base option sets the relative root for the set of files,
  // preserving the folder structure
  return gulp.src(['./__app/**/*.*'], { base: './__app/' })
  .pipe(gulp.dest('app'));
});

 gulp.task('clean3', function(done){
  return del('__app');
});

 gulp.task('embed', function (done) {
    return gulp.src('__app/**/*.ts') // also can use *.js files 
    .pipe(embedTemplates({sourceType:'ts', basePath: 'www/', minimize: { quotes: true }}))
    .pipe(gulp.dest('./app'));
  });

 gulp.task('compile', function(done){
  runSequence(
    ['scripts'],
    function(){
      buildBrowserify({
        watch: false,
        minify: true,
        uglifyOptions: {
          mangle: false
        },
        browserifyOptions: {
  debug: false, syntax: false // sourcemaps off
}, 
tsifyOptions: { noImplicitAny: false, allowSyntheticDefaultImports: true,  removeComments: true, skipDefaultLibCheck: true, target: "ES5"} }).on('end', done);
    }
    );
});
1 Like

I agree, but we can do more today, not just waiting for future

I don’t see why template request matters since the templates are packaged with the code, maybe if you’re talking about deploying an Ionic 2 app as a web site.

It’s critical to shrink the size of app.bundle.js, my understanding was that every kilobyte of JS code took 1ms to parse and execute so if my app.bundle.js is 3MB, parsing it could take 3 seconds which is a big chunk of time for mobile interaction.

1 Like

Maybe you’re talking about STC (Static Template Compilation) instead of just embedding the templates?

Also if that ‘1 ms to parse’ is about web, in mobile it’ll be slower due to Ram and CPU constraints, doesn’t it?

Desktop browsers are quicker than mobile browsers - 1ms. I saw this measurements somewhere on the internet but I’m sure a 200k JS file and a 2MB JS file can have a huge difference. I hope Angular 2’s tree shaking stuff gets ready faster.

I don’t think templates matter either, my bet is on Angular’s zoneJS and various other clever stuff.

Hey @eugenet how fast does your app load on mobile phones?
417ms with Ioinc beta sounds awesome.

I tested blank ionic apps on different phones and they seems to always load in around 3s, no matter how slow or fast the phone is.
I guess that’s because single thread performance on Android is equally bad on budget as well as flagships.

instantly,
you can check store links on http://www.sherpadesk.com/sherpadesk-triples-perfomance-with-new-progressive-web-app/
our app is completely loaded in webview from site http://m.sherpadesk.com/

@luchillo17, @itlr cause all content stored on remote site its important to limit server request to templates in my case to prevent additional delays and jerky app

When you say that your app is loaded from site to webview it means that your ionic app is just a webview container that loads the real app from server?

Also i’m unable to drop size under 2.2 Mb even after minification and treeshaking.

Yes, it’s true. real app is on server completely

Soo you’re even using ionic components?

What about plugins, do the cordova.js is downloaded from web or something like that?

Do plugins like databases works ok?

@eugenet thx for the effort documenting your solution for boot time, really interesting.

You achieve to have a really fast boot time by loading each time your app content from a server right, I understand correctly.

So didn’t you win application boot time to loose time afterwards when your app has to load the content of your application ? Respectively, at the end, didn’t your app start quickly but the user can’t straightly use it because the content has to be load? Or did you find a solution there where you’re caching the app “content” the first time it will be loaded?

I also guess he’s caching the files, be it with a cache manifest, intercepting and caching the request in the app-cache with service-workers or just setting the http caching strategy, anyway there’s no point in having the app wrapper if he doesn’t cache the files somewhere.

If he really doesn’t then why not just using the normal browser with an app manifest, it would look like a native app and work just the same with less disk space used since it would be using the already installed browser (unless he needs native stuff like calendar, camera or something not available to mobile browser.

All content loaded from server when app starts first, but then webview cache all files cause it’s single page site.
This cache (and app) destroyed only when user kill app from app switcher (which is rare) or reboot phone.
If I want to update app, I check version with api call and if new available, I ask user to confirm update (just reload webview).
@luchillo17 I dont use app-cache and service-workers now
but maybe use later

thx for your answer @eugenet. this solutions looks good but may be not the solution in my case because I’ve got many pages and services. I’m a little bit “concerned” that instead of having that delay on app start I will have it afterwards … but well if I don’t find any other solutions I will have to try

Hey how do you manage to use it like a browser? do you use the cordova-plugin-inappbrowser or something less complex?

With the release of Beta 11, the Ionic team announced some great news regarding the loading time which should be delivered with Beta 12!

http://blog.ionic.io/announcing-ionic-2-beta-11/

So wait and see

After upgrading to beta.11. app.bundle.js shrinks from 9M+ to 4M, this seems to have helped a lot.