Template Caching Ultimate Hack for Ionic Optimization

The Ionic framework is best suited for the development of Hybrid apps, it provides ultimate and great features to remove that thin like to distinguish between Native and Hybrid apps. You can visit my previous post for another useful trick for Ionic optimizations.

In this post, we will discuss Template Caching technique which we can use in our Ionic applications, which optimizes the Ionic app to great extent. This will remove fluctuations which we face when we switch from one view to other as it preloads all view in advance.

To get this done we will do the installation of gulp-angular-templatecache plugin in our Ionic app.

Here we assuming that we already installed Ionic app using

then adding platform using

 

Let’s begin  ….
Go to app’s root folder then press SHIFT+Right click then select “Open command window here”.
Step 1 – Install gulp-angular-templatecache by pasting below code in CMD then hit enter.

NOTE: Here if you face error something like then you need to check if ‘gulp’ is installed on your system. If not you can install using this command npm install -g gulp

 

Step 2 – Add below code in gulpfile.js

 

Step 3 – Add dependency ‘templates‘ in you app.js, then it will look similar to the following code

 

Step 4 – Run following CMD Gulp command and template.js will generate at ./www/dist

Now you need to include ‘template.js‘ file created in your Index.html at root of you app folder

 

NOTE: When ever you make any changes in you template html files you always need to run

command to update generated ‘dist/templates.js

Now when ever you load you app in mobile device it will load your templates from templates.js file instead of calling HTML files from your template flder using ajax calls.
Thats all folks   …

Leave a Reply

Your email address will not be published. Required fields are marked *