CODEWITHSUNDEEP
javascripthtmlangularjsperformance
deem
deem

Reputation: 1252

Are there any benefits of pre-fetching templates in angularjs?

I have question concerning optimising application. I have application with multiple directives, so I decided to build single min. css and js file for them all. But at the same time, I was thinking of another way.

What if I would also build one big, minimalised HTML file? Angular allows including templates from script tag:

<script type="text/ng-template" id="tempName"> Template content </script>

If so, what would be downsides of injecting every directive's HTML in one big file? Would it be any better than multiple small files and firing request when they are needed? I know, that it wouldn't be so good if we have big application with multiple views, but user only stays at few of them. My idea is to build this file for smaller directives, that shoulnd't cause any problems, right?

What do you think of this?

Upvotes: 3

Views: 210

Answers (2)

bhantol
bhantol

Reputation: 9616

Like anything there are pros and cons to this approach of caching templates.

Pros:

  • No need to fetch the template - good for offline capability
  • If network is slow and this fetch is going to cause some lag as the directive, route, include must resolve the templateUrl. In such cases pre-fetching helps in improving the smoothness of feel.
  • Pre-fetching also pre-compiles the template ready to be used as it puts in the templateCache.

Cons:

  • In a large application if all the templates are prefetched we are essentially utilizing more memory to store all the templates when only a handful might get used.
  • If the prefetched templates are fetched during loading it causes additional request.

If the pros exceed in your application you may want to use some build tool such as:

Upvotes: 3

Whale Pool
Whale Pool

Reputation: 53

Each file you include is an additional request the browser has to make back and forth, so if u can include it in the same page, then its going to be faster and more efficient.. the main reason for excluding in multiple files is simply for organisation vs the 0.01ms different in page load time.

You can also use something like grunt to work with separate files and then have grunt automatically concat and minify your files for you for on the fly optimization.

Upvotes: 2

Related Questions