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.

Improve this question
7
  • 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. Commented Sep 7, 2016 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 ? Commented Sep 8, 2016 at 4:37
  • If this works for you, then sure, use grunt-cdn on one set of files and grunt-angular-templates on another set. Commented Sep 8, 2016 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 Commented Sep 30, 2016 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. Commented Oct 1, 2016 at 4:18
Related questions
4
Is the Angular templateCache shared between apps? Is it persistent?
0
Generic cache breaker for angular templates?
7
Is this a good method for template cache busting in angular?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.