2

私は自分のサイトで RequireJS を使用しています。ファイルを本番環境にデプロイする前に、rjs を使用してファイルを縮小しています。現在、単一のファイルではなく、いくつかの縮小ファイルを作成しています。

サイトの読み込み時間を短縮するために、複数の CDN も使用しているため、ブラウザーはより多くのダウンロード ストリームを開き、静的コンテンツはできるだけ速く読み込まれます。

ここに私の問題があります。パラメータを使用して RequireJSを構成し、CDN からスクリプトを読み込むことができますbaseUrlが、ランダムな baseUrl を使用するように RequireJS を構成する方法はありますか? デフォルトではこれが不可能であることはわかっていますが、このトリックを実行するプラグインまたはメソッドを提案することで、ここの誰かが私を助けてくれることを望んでいました.

私が見つけた唯一の解決策は、各ファイルへのパスを手動で定義し、定義ごとに異なる CDN を与えることでしたが、それを行うためのより良い方法があることを本当に願っています. 手動ではなく自動の方法です。

追加、表示、または回答できるものがあれば、お知らせください。

前もって感謝します。

4

1 に答える 1

3

公式の API はあなたが望むものをサポートしているとは思いませんが、回避策としていくつかのアイデアがあります:

オプション 1:使用される CDN をランダム化する式をパス構成セクションに埋め込みます。以下は jQuery の例ですが、ライブラリごとに同様のことを繰り返すことができます。

<script src="js/lib/require.js"></script>
<script>
var jqCDNs = [ 'http://code.jquery.com/jquery-2.0.2', 'http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.2' ]

require.config({
    paths: {
        foomodule: 'libs/foo',
        // create array with two elements: a random CDN url plus a local fallback version
        jquery:  [ jqCDNs[Math.floor(Math.random() * jqCDNs.length)], 'jquery-2.0.2' ]
    }
});

require( ['jquery'], function(jq) {
    // do stuff
});

オプション 2:詳細な URL コントロールで説明されているように、RequireJS のロード メソッドをオーバーライドします。

<script src="require.js"></script>
<script>

require.config({
    paths: {
        foomodule: 'libs/foo',
        jquery:  [ '{CDN_PREFIX}/jquery-2.0.2' ]
    }
});

(function () {
  var CDNs = [ 'http://code.jquery.com/', 'http://ajax.aspnetcdn.com/ajax/jQuery/' ]
  var load = requirejs.load;
  requirejs.load = function (context, moduleId, url) {
    var prefix = CDNs[Math.floor(Math.random() * CDNs.length)];
    //modify url here, then call original load
    url = url.replace('./{CDN_PREFIX}', prefix);
    return load(context, moduleId, url);
  };

  require( ['jquery'], function(jq) {
      // do stuff
  });

}());

</script>

オプション 3:独自のLoader Pluginを作成します。以下のサンプル コードは完全な解決策ではありませんが、私が何を意味するかを示しています。

// normal RequireJS config stuff
require.config({
    paths: {
        foomodule: 'libs/foo',
        jquery:  [ 'http://code.jquery.com/jquery-2.0.2', 'http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.2' ]
    }
});

// crud loader plug-in. See http://requirejs.org/docs/plugins.html for more things to think about
//
// RequireJS supports an array of path values but it always takes them in order
// this loader plug-in is a hack to shuffle the order before RequireJS does its request
define('cdn', function() {

    //credit: http://stackoverflow.com/a/12646864/151212
    function shuffleArray(array) {
        for (var i = array.length - 1; i > 0; i--) {
            var j = Math.floor(Math.random() * (i + 1));
            var temp = array[i];
            array[i] = array[j];
            array[j] = temp;
        }
        return array;
    }    

    return {
        load: function (name, req, onload, config) {
            // if the module has an array of path configs,
            if (config.paths && config.paths[name] && config.paths[name].length && config.paths[name].length > 1) {
                // shuffle the order of it
                shuffleArray(config.paths[name])
            }
            // and then pass on to the normal RequireJS process
            req([name], function (value) {
                onload(value);
            });
        }
    };
});

// then use the randPath! prefix before any module that you want to use this shuffle process
require( ['cdn!jquery'], function(jq) {
    // do stuff
});
于 2013-06-27T02:10:34.023 に答える