Angular templates optimizations: inlining templates in index.html vs templateCache as js

Question

Currently our templates are in html files, while the build does minify them (with htmlmin) It appears there are two approaches to optimize templates loading in angular.

1. using $templateCache as explained here. Which means putting the minified templates into a js file, probably with this grunt plugin.

2. Inlining the template,which means using them with angular script directive, probably using this grunt plugin

from npm usage stats I can judge that the first option is more popular, but I'm not sure why, what are the tradeoffs between the two options and which gives better performance.

Thanks!

Answer 1

To say anything more about performance it would have to be measured. But from the theoretical point of view (1) should be more performant since with (2) templates are ending in the $templateCache anyways, and using the <script> directive means additionally: * having those <scripts> in the DOM tree * processing <scripts> tags during the DOM compilation with this directive: https://github.com/angular/angular.js/blob/master/src/ng/directive/script.js

In short: it looks like using <scripts> directive means more runtime processing in a browser. Should be confirmed with some performance testing, but I would assume that one won't see dramatic performance difference.