2

I am working on optimizing a pretty large angularjs application with 100+ templates. I use grunt for automation. What i am trying to achieve here is that i need to prefix all the urls in my production code with a cdnUrl as I plan to host static assets on cdn.

I tried using this grunt plugin to do that and i was successfully to replace all references in my code except the templateUrls in <ng-include> tags and those in UI routers state configuration.

Hence i thought of solving that issue by precompiling all my angular js templates into a single js file using $templateCache service using this plugin. After checking out the size of the precompiled js file i found out it was a whopping 1.13 MB even with html minified.

Comparing that to my overall app it takes just 1.5 ~ 1.7 mb for my entire app during first load. So i don't find it legible to include this precompiled template which forces lot of extra weight to be downloaded on the user's device. Also there are some views which are partially restricted to some users and generally speaking i feel its unfair to load data for those sections of the app which many users won't be anyway visiting.

So what do you guys recommend in such cases ? Is it still preferable to use $templateCache in production? if not any help regarding prefixing angular templates with cdn url using grunt will be helpful.

Vinay
  • 723
  • 9
  • 32
  • Using Grunt supposes that filename masks can be used to specify which files you want to process with plugin. If Grunt isn't critical part of your workflow, a similar Gulp plugin may offer better flexibility. – Estus Flask Sep 07 '16 at 15:25
  • @estus so what you are suggesting is that i should try and look into the grunt-cdn plugin that i already use and modify it to work with custom tags ? – Vinay Sep 08 '16 at 04:37
  • If this works for you, then sure, use grunt-cdn on one set of files and grunt-angular-templates on another set. – Estus Flask Sep 08 '16 at 13:00
  • @Vinay What did you end up going with? I'm in a similar situation and was wondering the performance impact loading all templates in `$templateCache` – xiao Sep 30 '16 at 15:16
  • @linxtion i ended up avoiding $templateCache all together because there was lot of html code in my app and using templateCache meant that i was including html that my user won't navigate to in many cases. There is definitely an impact on first load time because of lot of content in templateCache. – Vinay Oct 01 '16 at 04:18
  • @Vinay Thanks, I feel the same. I'm using templateCache sparingly. – xiao Oct 01 '16 at 15:14
  • Possible duplicate of [Loading html and Controller from server and creating dynamic states UI - router](https://stackoverflow.com/questions/35042277/loading-html-and-controller-from-server-and-creating-dynamic-states-ui-router) – Paul Sweatte Aug 21 '17 at 05:00

0 Answers0