初期ページの読み込み時にrequire.jsがすべてのモジュールを読み込んでいるように見えるのはなぜですか？

Question

私はrequirejsを使用して1ページのバックボーンアプリケーションを開発しています。今日、ベータサーバーにデプロイしたときに、すべてのスクリプトをフェッチしている間、最初のページの読み込みが約20秒であることがわかりました。

私はそうのようなモジュールを定義するとき、私は、依存関係の配列を使用していたので、これはだったと仮定：

私はメインのアプリケーションモジュールがロードされたとき、他のすべてのスクリプトが原因に、ロードされることを意味信じ

define([ 
    'ui', 
    'models/user', 
    'collections/campaigns', 
    'collections/groups', 
    'collections/keywords', 
    'collections/inboxes', 
    'collections/templates', 
    'collections/contacts', 
    'router' 
], function (Ui, UserDetails, Campaigns, Groups, Keywords, Inboxes, Templates, Contacts, Router) { 

    return { 
     start: function() { 
      // ... 
      // initialize and start app 
      // ... 
     } 
    } 
}); 

すべての単一のモジュールがこのメソッドを使用していたという事実。

私はその後、私はそれらを必要に応じて、私はこのようにそれらを必要なときに直接require('...')を呼び出すことによって、それらを得るために、モジュールを取得する方法に変更：もう一度アプリケーションを実行してチェックすると、驚いたことにしかし

define(function (require) { 
    return Backbone.Router(function() { 
     // ... 
     // route initializtion etc 
     // ... 

     inbox: function (routeVar) { 
      var InboxView = require('InboxView'); 
      this.inboxView = new InboxView(); 
      // render view etc 
     } 
    }); 
}); 

をchromes開発者コンソールの[ネットワーク]タブ - アプリケーションが以前のようにすべてのモジュールを取得しているのを見て、同じページの読み込み時間を取得しています。

ここでポイントが完全に不足していますか？私は、スクリプトがrequireの呼び出しのたびにフェッチされるという印象を受けていました。それは正しいのですか？

Answer 1

非同期あなたは要求されたモジュールがロードされたときに呼び出される関数コールバックを必要とし、提供呼び出す必要がありますAMDモジュールをロードするために：あなたが提供されているサンプルコード

require(['InboxView'], function(InboxView) { 
    // Do something with InboxView here... 
}); 

を同期スタイルでrequire('InboxView')と呼ばれます。あなたは「sugar」構文を使用しているため、RequireJSはrequire()への同期呼び出しを見つけ、あなたのコードを検査し、あなたにこの与える影響では、モジュールの最上位レベルの依存関係リストにそれらの依存関係を追加：

define(['require', 'InboxView'], function (require) { 
    return Backbone.Router(function() { 
    // ... 
    // route initializtion etc 
    // ... 

    inbox: function (routeVar) { 
     var InboxView = require('InboxView'); 
     this.inboxView = new InboxView(); 
     // render view etc 
    } 
    }); 
}); 

...なぜ、すべてのモジュールがすぐに読み込まれたのか。

非同期コールバックをrequireに追加すると、正常に動作するはずです。また、ロードが完了するまでrequireコールブロッキングなしでルートが起動するまで、RequireJSがInboxViewのモジュールをロードするのを待っていた場合、コードはどのように機能しますか？ :)