Question

我在我们的网站上使用RequireJS，在将文件部署到生产环境之前，我们使用rjs来缩小文件。目前我正在创建几个缩小文件，而不是单个文件。

为了在我们网站上更好的加载时间，我们还使用多个CDN，因此浏览器将打开更多下载流，静态内容将尽快加载。

这就是我的问题所在。我可以通过baseUrl参数配置RequireJS来从我们的CDN加载我的脚本，但是有没有办法配置RequireJS来使用随机的baseUrl？我知道默认情况下这是不可能的，但我希望也许有人可以通过建议一个插件或方法来帮助我。

我找到的唯一解决方案是手动定义每个文件的路径，在每个定义上给它们不同的CDN，但我真的希望有更好的方法来实现它。一种自动方式，而不是手动方式。

如果有什么我可以添加，显示或回答，请告诉我。

提前致谢。

Answer 1

我认为官方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：按照Fine-grained URL control中所述覆盖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
});

配置RequireJS从多个CDN加载

1 个答案: