配置RequireJS以从多个CDN加载 [英] Configuring RequireJS to load from multiple CDNs

问题描述

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

I'm using RequireJS on our site and before the files are deployed to production we are using rjs to minify the files. Currently I am creating several minified files, not a single file.

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

For better load times on our site we are also using multiple CDNs so the browser will open more download streams and the static content will load as fast as possible.

这是我的问题。我可以通过 baseUrl 参数配置RequireJS以从CDN加载脚本，但是是否可以将RequireJS配置为使用随机的baseUrl？我知道默认情况下这是不可能的，但是我希望这里有人可以通过建议一个可以解决问题的插件或方法来帮助我。

Here lies my problem. I can configure RequireJS through the baseUrl parameter to load my scripts from our CDN, but is there a way to configure RequireJS to use a random baseUrl? I know by default this isn't possible, but I was hoping maybe someone here can help me by suggesting a plugin or a method that will do the trick.

我发现的解决方案是手动定义每个文件的路径，使每个定义具有不同的CDN，但我真的希望有一种更好的方法。

The only solution I found was to define the path manually to each file, giving them different CDNs on each definition, but I really hope that there's a better way to do it. An automatic way and not a manual one.

如果有我可以添加，显示或回答的内容，请告诉我。

If there's anything I can add, show or answer please let me know.

预先感谢。

推荐答案

我认为官方API不支持您想要的东西，但是这里有些解决方法：

I don't think the official API supports what you want, but here are some ideas for workaround:

选项1：将表达式嵌入到路径配置部分，该部分可随机分配使用哪个CDN。以下是jQuery的示例，但您可以对不同的库重复类似的操作：

Option 1: embed expressions into the paths config section that randomizes which CDN is used. Below is an example for jQuery but you could repeat something similar for different libraries:

<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：覆盖RequireJS的加载方法，如细粒度的URL控制：

Option 2: Override RequireJS's load method as described in Fine-grained URL control:

<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：编写自己的加载程序插件。下面的示例代码不是一个完整的解决方案，但它显示了我的意思：

Option 3: Write your own Loader Plugin. The below sample code is not a complete solution but it shows the idea of what I mean:

// 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加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！