All .js files prepended with seemingly random hex characters

Question

I'm doing some maintenance on a backbone.js application another developer built about a year ago. The application is running from a concatenated and minified context; so there is a build process but I see no Gruntfile or other build file or process that I recognize.

Furthermore, all the .js files in the application are prepended with seemingly random HEX digits followed by a period in this form:

7634d305.main.js
880bef54.text.js
1deb5b0d.router.js
..and so on

After some digging around I came to realize that this developer may have been using r.js to build the minified deployment version. I was unable to get r.js to run because every dependency and javascript file in the entire directory tree is prepended with these weird hex characters.

Is this a development pattern anyone recognizes? Why are these files named like this? I can spend some time writing a script to remove the leading hex charactesr, but I wanted to be sure there was some obvious tool or step that I am missing.

Answer 1

This is a common technique which basically prepends a hashed version of the file's contents to the filename, for cache busting; so you can set long expiry dates on a static asset and then when it is updated, the hash is generated afresh (and therefore the browser effectively sees a new file and downloads the updated one). Looks like this one was truncated to be a certain length, but they can be as long as the hashing algorithm allows (if you want).

In Grunt, you can use a combination of grunt-usemin and grunt-rev to generate these for yourself, however there are many tools out there already that do this, some popular PHP frameworks have it built in, for example Symfony. Perhaps these have been generated by the server side framework.

Answer 2

I don't know what tool they specifically used to generate it but I'm going to guess it is probably the result of hash on the filename and time the files were deployed or something similar.

The files are named like that to make them unique so that when they are deployed browsers will not use a cached version of main.js and break the application.