Node.js serve multiple files in one request

Question

Is it possible to serve multiple files in one request?

Here is a simplified version of my code to serve our website's home page on a request to our node.js server that contains no parameters (there is caching code that caches the file data to make the server more efficient, handles errors, etc.):

var http = require("http");

http.createServer(function(req, res){
    res.setHeader("Access-Control-Allow-Origin", "*");

    if (req.url == "/"){
        res.writeHead(200, {"Content-Type": "text/html"});

        fs.readFile("./pages/index/index.html", function(err, data){
            res.end(data);
        });
    } else if (req.url == "/index.css"){
        res.writeHead(200, {"Content-Type": "text/css"});

        fs.readFile("./pages/index/index.css", function(err, data){
            res.end(data);
        });
    } else if (req.url == "/index.js"){
        res.writeHead(200, {"Content-Type": "application/javascript"});

        fs.readFile("./pages/index/index.js", function(err, data){
            res.end(data);
        });
    } else if (req.url == "/indexBackground.jpg"){
        res.writeHead(200, {"Content-Type": "image/jpeg"});

        fs.readFile("./pages/index/images/background.jpg", function(err, data){
            res.end(data);
        });
    }

}).listen(port);

The html file itself imports external libraries using CDN's and the references to the stylesheet, script and image look like this:

<link rel="stylesheet" href="https://our-website-url/index.css">
<script type="text/javascript" src="https://our-website-url/index.js"></script>
<img src="https://our-website-url/indexBackground.jpg">

The page is served correctly but 3 separate requests must be made in order to serve the page. I would imagine this makes the website slower to load and adds unnecessary load to the server.

Is it possible to serve all 3 files in one request despite the fact they have different content types? If so how would we reference these files all served in one request in the html file, and if not, is there a more efficient method to serve the page that what we are currently using?

Answer 1

Are you downloading the files or are you rendering them in the browser. IF you are rendering them in browser, it makes more sense that the browser can make multiple concurrent requests for resources to optimize the bandwidth rather make single blocking request. 3 separate requests to the CDN would be in parallel and this would be faster.

Answer 2

If it's a single page, you can just put them in script and style tags, the images can be put in data-urls and you are happy. If it is multiple pages using those files, it is better to let the browser get and cache them.

I think there was some protocol (http2?) where the server can send additional files that the browser will request anyways next. But I have no idea what the technology was called.

Good luck, interesting question!