1

I am struggling with understanding why my AngularJS app is performing differently after having viewed one or multiple pages.

What happens is that on the first team when I deploy my website, clear my cache, and then go to the page, the page reacts a bit "slow" in the sense that when you click on opening a new page, nothing happens, and then after a second or two it displays the page.

This does not happen after I visit the affected pages and then retry again. Then its far more smooth. Same if I visit the website a day after.

What can I do to prevent this behavior?

I use angular ui-router, $state.go and the latest AngularJS version.

WJA
  • 6,676
  • 16
  • 85
  • 152
  • 1
    Caching of the images, templates and js files is probably the reason that it run faster, and when you clear the cache the browser must reload the resources from the server on the first visit – Alon Eitan Feb 25 '19 at 17:03
  • because you didnt cache the templates of your directives/components ! ;) try https://www.npmjs.com/package/gulp-angular-templatecache and your app will not execute AJAX calls to fetch directives/components templates – Pierre Emmanuel Lallemant Feb 25 '19 at 17:03
  • + chrome does cache the templates of angular apps, which isn't really what you really want when rewritting them. – Pierre Emmanuel Lallemant Feb 25 '19 at 17:05
  • I read it through but what remains unclear is what it does. You mean it caches the pages before the first load, such that it is like it went through all these pages before you start? – WJA Feb 26 '19 at 13:03
  • Can you please elaborate in an answer? – WJA Mar 12 '19 at 08:51

1 Answers1

0

This seems to provide a partial answer. Having tested it a bit, if you add this to your app.js, it will preload all templates:

angular
.module('app')
.run(['$state', '$templateCache', '$http',
    function ($state, $templateCache, $http) {
        angular.forEach($state.get(), function (state, key) {
            if (state.templateUrl !== undefined && state.preload !== false) {
                $http.get(state.templateUrl, {cache: $templateCache});
            }
        });
    }
]);

Answer based on response to similar question: https://stackoverflow.com/a/35036896/4262057

WJA
  • 6,676
  • 16
  • 85
  • 152