ASP.MVC + AngularJSで最初のページの読み込みが遅い理由

Question

私はASP.NET MVCとAngularJSのアプリケーションを持っています。 私のルートはAngularJSによってui-routerで管理されています。

初めてAngularJSがパーシャルビューを読み込むと、それより遅くなります。この原因は何ですか？

私のコードがあります。

AngularJS

app.config(function ($httpProvider, $urlRouterProvider, $locationProvider, $stateProvider) { 
    $urlRouterProvider.otherwise('/home'); 
    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; 
    $locationProvider.html5Mode(true); 

    var homeState = { 
     name: 'home', 
     url:'/home', 
     controller: 'HomeCtrl', 
     controllerAs:'vm', 
     templateUrl:'/AngularJS/Home/Home' //AngularJS is a Area/Controler/Method 
    } 
    var loginState = { 
     name: 'login', 
     url: '/login', 
     controller: 'LoginCtrl', 
     controllerAs: 'vm', 
     templateUrl: '/AngularJS/Home/Login' 
    } 
    var registrationState = { 
     name: 'registration', 
     url: '/registration', 
     controller: 'RegistrationCtrl', 
     controllerAs: 'vm', 
     templateUrl: '/AngularJS/Home/Registration' 
    } 
    var dashboardState = { 
     name: 'dashboard', 
     url: '/dashboard', 
     controller: 'DashboardCtrl', 
     controllerAs: 'vm', 
     templateUrl: '/AngularJS/Home/Dashboard' 
    } 

... 
    $stateProvider.state(homeState); 
    $stateProvider.state(loginState); 
    $stateProvider.state(registrationState); 
    $stateProvider.state(dashboardState); 
    $stateProvider.state(gameState); 
    $stateProvider.state(userState); 
    $stateProvider.state(newGameState); 
    $stateProvider.state(platformState); 
    $stateProvider.state(unavailabilityState); 
    $stateProvider.state(teamsState); 
    $stateProvider.state(newTeamState); 
    $stateProvider.state(editTeamState); 
    $stateProvider.state(detailTeamState); 

    $httpProvider.interceptors.push(requestInterceptor); 


}) 

ASP.NET MVC

public PartialViewResult Home() 
     { 
      ViewBag.Title = "Home"; 
      return PartialView(); 
     } 
     public PartialViewResult Login() 
     { 
      ViewBag.Title = "Login"; 
      return PartialView(); 
     } 
     public PartialViewResult Registration() 
     { 
      ViewBag.Title = "Registration"; 
      return PartialView(); 
     } 

     public PartialViewResult Dashboard() 
     { 
      ViewBag.Title = "Dashboard"; 
      return PartialView(); 
     } 

... 

Exempleのロード時間は： まず

セカンド

Answer 1

アプリケーションは、あなたがテンプレートに追加した大規模な資源、それはChromeブラウザ（それはまた、同様に他のブラウザで利用可能）怒鳴るの手順に従ってくださいを使用している見つけるの一つの方法をロードしようとしている可能性があります

ページを右クリックし、「要素を検査」に進み、「ネットワーク」タブを選択します。そこ

あなたはそのより高い取得する際に、サイトはに時間がかかっているどのリソースをチェックするために、GoogleのChromeでネットワークプロファイラを使用してみてください