여러 CDN에서로드하기 위해 RequireJS 구성하기

Question

사이트에서 RequireJS를 사용 중이며 파일을 프로덕션에 배포하기 전에 rjs를 사용하여 파일을 축소했습니다. 현재 하나의 파일이 아닌 여러 개의 축소 된 파일을 만들고 있습니다.

저희 사이트의로드 시간을 늘리기 위해 여러 CDN을 사용하므로 브라우저에서 더 많은 다운로드 스트림을 열어 정적 콘텐츠가 가능한 빨리로드됩니다.

여기 내 문제가 있습니다. CDN에서 스크립트를로드하려면 baseUrl 매개 변수를 통해 RequireJS를 구성 할 수 있지만 임의의 baseUrl을 사용하도록 RequireJS를 구성하는 방법이 있습니까? 나는 이것이 기본적으로 가능하지 않다는 것을 알고 있지만, 아마도 누군가가이 트릭을 수행 할 플러그인이나 방법을 제안함으로써 나를 도울 수 있기를 바랬다.

유일한 해결책은 파일마다 수동으로 경로를 정의하여 각 정의마다 서로 다른 CDN을 지정하는 것이었지만 실제로는 더 나은 방법이 있기를 바랍니다. 수동 방식이 아닌 자동 방식입니다.

내가 추가하거나 표시하거나 답변 할 수있는 것이 있으면 알려 주시기 바랍니다.

미리 감사드립니다.

Answer 1

나는 공식 API는 당신이 원하는 지원 생각하지만, 여기에 해결 방법에 대한 몇 가지 아이디어입니다하지 않습니다

옵션 1 : CDN이 사용되는 랜덤 섹션을 config (설정) 경로에 삽입 식입니다. 다음은 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 
});