1

Is there a way to get multiple files from S3 (or any CDN) in one request?

For example, I have four files on S3:

  • example.com/cdn/one.js
  • example.com/cdn/two.js
  • example.com/cdn/three.js
  • example.com/cdn/four.js

I would like to be able to request any combination of them at a time. I currently have to include them separately:

<script src="example.com/cdn/one.js" />
<script src="example.com/cdn/two.js" />

But I would like to include them as one request:

example.com/cdn/code.js?one&two

I've considered combining the needed combinations into single files, but there will be way too many combinations for that to be realistic. I've also considered combining all of them into one file, but that would be ridiculously large.

cjroth
  • 173
  • 11
  • S3 and most CDN's try and deliver content unaltered, if you need to alter content on the fly i.e. combine files you need to serve them off your own server (i.e. EC2). However in this case you may not need to, apart from the small overhead of the extra HTML, the actual HTTP transfer is likely to fetch all the files in one connection (at least for relatively modern browsers). – Barnaby Shearer Jul 12 '12 at 17:42

2 Answers2

1

First of all: Your question is more a JS thing than related to S3 / CDNs in general. And to answer your question: You can't "combine" them in one http request.

If you don't want to concatenate and minify them you should take a look at RequireJS, which could handle loading of your scripts – it's async and won't block the browser from rendering.

This is a really great article about async loading: css-tricks.com - Thinking Async which will give you a better insight.

EDIT after comment:

You can in fact use PHP to concatenate & minify your JS files on the fly, but this will put additional load on your server and you'll loose the benefits you get from a CDN … Another approach would be using a build system, which packs everything before it goes into production.

For further information on this topic take a look at the following links:

To do on the fly minifaction on your dev system (if it's a Mac) you may want to try CodeKit.

Community
  • 1
  • 1
dom
  • 11,894
  • 10
  • 51
  • 74
  • I see what you are saying but I'm really wondering if there is a specific technology to have the server combine the files on the fly based on the URL. – cjroth Jul 09 '12 at 00:28
0

Here is one way you could do that (assuming you just use one&two&three and note file=one&file=two&file=3):

function getJs() {
  var url = window.location.toString();
  var query = url.split("?");
  var params = query.split("&");

  // iterate through array of params and write JS
  for (i=0; i<params.length; i++) {
    var name = params[i] + ".js";
    document.write("<script defer language='javascript' type='text/javascript' src='" + name + "'><\/sc" + "ript>");
  }
}

This should load after the page is loaded. Then in in your HTML perhaps. I haven't tested this but should be what you're looking for I reckon.

Mike S.
  • 4,806
  • 1
  • 33
  • 35
  • It removed the [ body onload=" getJs() " ] part from my last statement so you'd want to call this function on load. Now this assumes the parameters in URL are like you posted and the URL of the page you are viewing but you can customize as needed from this. – Mike S. Jul 13 '12 at 14:52
  • of course you can add in example.com url to src path above too (I just wrote out file name with out the http://example.com/cdn/ + name part) – Mike S. Jul 13 '12 at 14:55
  • Thanks Mike. This would work, but I'm actually looking for a way to do this without making a separate request for each item. – cjroth Jul 13 '12 at 21:12