6

私は、requirejs を使用して単一ページのバックボーン アプリを開発しています。今日、ベータ サーバーにデプロイしたところ、すべてのスクリプトを取得する際の最初のページの読み込みが約 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
        }
    });
});

しかし、驚いたことに、アプリを再度実行して chrome 開発者コンソールのネットワーク タブを確認すると、アプリケーションがすべてのモジュールをフェッチする前と同じように、ページの読み込み時間が同じであることがわかりました。

ここでポイントを完全に見逃していますか？require を呼び出すたびにスクリプトがフェッチされるという印象を受けました。そうではありませんか？

4

1 に答える 1

6

AMD モジュールを非同期的にロードするには、require を呼び出し、要求されたモジュールがロードされたときに呼び出される関数コールバックを提供する必要があります。

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 に async コールバックを追加すれば問題ありません。また、ロードが完了するまで呼び出しをブロックInboxViewせずにルートが起動するまでRequireJS がモジュールのロードを待機した場合、コードはどのように機能しますか? require:)

于 2012-08-06T14:58:13.943 に答える