2

I'm part of a development team who works on a single page application that's becoming a nightmare to develop. At the moment our build minifies all the JS files into one file so once it's deployed it's fast and easy to cache but when developing we have over 2000 individual JS files that need to be downloaded every time you refresh.

Has anyone come across this issue themselves and found a workaround.

One solution I was thinking was that if you could cache every file, but every time you save the file it would also break the cache just for that file.

A tactic people are using at the moment is to slim down their workspaces but that takes a huge amount of time as there are so many dependencies.

Any help on this would be very much appreciated

3
  • Why dont you use grunt? Dec 9, 2015 at 11:19
  • Yeah Grunt or Gulp (easier) or whatever tool that can concatenate files. 2000 freaking JS files you say??? O_o Are you sure you need that many files? Isn't that an architecture flaw? Dec 9, 2015 at 11:50
  • we do use grunt to build our workspaces and as part of our build system but how can it help us when you want to make a small change and press refresh to test it
    – kev670
    Dec 9, 2015 at 13:41

1 Answer 1

1

The problem is that when you're doing F5 or Ctrl+R (or using you're browser inspect tool), the headers sent to get the file asks for no cache for every file, and interprete all JS, assuming you're working on a browser project.

A possible easy to set up solution would be to make a small dedicated HTTP server which looks at the modification date of the file to serve and which returns only an 304 Not Modified header even if the browser specifies a if-modified-since header (which means that the file requested is cached by the browser).

Scenario:

  • The client asks for JS files (for the second time) with a if-modified-since: Wed, 09 Dec 2015 12:18:00 GMT header to your localhost:8888

  • If the file on disk is less recent, file server sends a 304 header

  • If the file is newer so the file server streams the file, specifying Date: Wed, 09 Dec 2015 12:20:00 GMT and cache-control: public, max-age:3600, must-revalidate

Edit: so this is a tiny NodeJS file server. Just install NodeJS, add npm. Create this file as index.js, set the wwwpath variable, run npm install node-static in the same folder as index.js (it is a dependency of the file server below), and execute the program with nodejs index.js (or node index.js on Windows).

var static = require('node-static');
var fs = require('fs');
var wwwpath = './www';
var fileServer = new static.Server(wwwpath);

require('http').createServer(function (request, response) {
    request.addListener('end', function () {
        fileServer.serve(request, response, function (err, result) {
            var filepath = wwwpath + request.url;

            // browser is checking cache
            if (request.headers && request.headers['if-modified-since']) {
                var ifModifiedSince = new Date(request.headers['if-modified-since']);
                var stats = fs.statSync(filepath);

                // file has been edited since
                if (stats.mtime.getTime() > (ifModifiedSince.getTime() + 1000)) {  // +1000 Date header is no millisecond accurate
                    response.writeHead(304, 'Not Modified');
                    response.end();
                }
            }

            // file not found / ...
            if (err) {
                response.writeHead(err.status, err.headers);
                response.end();
            }
        });
    }).resume();
}).listen(8080);

What does it do ? If you have a file myscript.js in wwwroot, call it with http://localhost:8080/myscript.js. If you refresh your page, the server will check the edit time of the file before streaming it.

3
  • Precision about this weird proposition: I think your are already using Grunt or a similar tool in your production environment. My solution does not requires a workflow modification which implies to compile then test (you're style using your original files). This solution is just : use your browser cache, avoid browser no cache behavior (whereas cache is really needed). I can send you a tiny NodeJS script for this server if you like the solution. Dec 9, 2015 at 12:34
  • If you wouldn't mind sending it on that would be fantastic. I think it's the best approach for us at the moment. Going through a build process everytime the browser is refreshed is not really a great solution. We are looking at ways we can split up our application as well as even the minified file is eventually going to get too large but from a dev proccess point of view caching files which have not been modified would be great
    – kev670
    Dec 9, 2015 at 16:15
  • 1
    I edited my post with a small NodeJS script, it is a really efficient language for custom HTTP servers. Hope that a 2000 304 headers will be faster than 2000 200 HTTP answer with all file streamed ! Also, if you like the solution and want to distribute the server to your dev team without any install, use a NodeJS portable version ;) Dec 9, 2015 at 21:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.