Using templateCache to boost android's performance

Hi guys!

Just want to let you know that I was having performance issues with my android app and after some tweaks I got a performance boost.

First of all was to enable native scroll (iOS and Android) on views that I don’t use keyboard or any scroll events.
Seconds was to use templateCache instead of regular HTTP requests for templates.

https://www.npmjs.com/package/gulp-angular-templatecache

Changes in my gulpfile.js

var templateCache = require('gulp-angular-templatecache');
...
gulp.task('generate:cache', function () {
    gulp.src('www/templates/**/*.html')
        .pipe(templateCache({
            module: 'yourmodulename',
            root: 'templates/'
        }))
        .pipe(gulp.dest('www/js'));
});
...

gulp.task('watch', function() {
    gulp.watch('./www/templates/**/*.html', ['generate:cache']);
    gulp.watch(paths.sass, ['sass']);
});

All my page transitions worked a lot better with this. And you can delete the templates/ folder after building your app.

It sounds good!
Do you cache your views with ionic when you define the state? (es: cache: false)

About scrolling: In your list do you have avatar or other images? because i noticed that native scroll is less smooth than ionic collection.

I do use view cache within Ionic but this only works for back views right?

I’m using crosswalk and all my scroll with images are using jsScroll.

I’m using native scroll for things like menus and popovers.

  1. yes it works for back views, but it should also speed your app

  2. don’t you think crosswalk makes the size of the app too big :smile:

  3. I agree on that!

But i think we are going a bit off topic :smiley:

Yes it makes the app too big.

I’will test it without crosswalk after those changes and see how it goes.

I tried it and there was a slight improvement on android but the hardware back button for going back in history stopped working. then I removed the template cache and it started working. What could be the reason? Anyone has any idea?