CODEWITHSUNDEEP
javascriptcssurl
Istiaque Ahmed
Istiaque Ahmed

Reputation: 6488

why so complicated name for javascript and css files?

I found this url

https://petitions.whitehouse.gov/sites/default/files/js/js_UiAlkc-vULf24xt5asxqvUtyoWeGDuXLXt7ti6xNnGg.js

as a source ( src)of javascript file in the site https://petitions.whitehouse.gov/.

And this one

https://petitions.whitehouse.gov/sites/default/files/css/css_7HCSWa0-mjR4tMqcKk2MWsaQFvHYUU9FuXNLwF5yIEY.css

for a css file.

Question is why is such complicated names used for the javascript or css files? Is it due to any framework or what ? Even if it is due to any framework , the question still stands.

Upvotes: 2

Views: 288

Answers (5)

haim770
haim770

Reputation: 49095

This is probably due to a 'minification' process that removes any characters/symbol that is not necessary for production (newlines / comments etc).

Usually this process is part of a 'Bundling' that not only minifies each source file but also combines multiple sources (css/js) files together to reduce number of HTTP requests.

Each 'bundle' results is then saved with unique name so next bundle iteration will have another unique name to prevent caching and be able to reflect the changes of the new modified bundle.

Upvotes: 4

Pebbl
Pebbl

Reputation: 35995

Whilst every answer here is correct in terms of why the CSS and JavaScript have been combined into a singular file for each language (i.e. all CSS in one file, all JavaScript in one file), no one has given a real reason as to why an alphanumeric string might be used — in place of, say, a linear numeric id or version number.

The main reason for using an alphanumeric hash, in this case, is generally due to not wanting the hassle or delay of storing extra data with regard to the aggregation. Whenever you have an automated system, if you want an incrementing number, you need to store that number somewhere i.e. in a database. It gets more complicated if you want this number to be a version number because that means you have to store a separate number for each emalgamated file (the number of emalgameted files can change rapidly when using a CMS, it's all dependent on what is being loaded on that particular page).

Put simply it is far easier to generate a alphanumeric hash based on a salt value and the current timestamp using something like MD5 or SHA1 at the time of rendering your HTML source. These functions almost guarantee non-collision with previous values (something you wish to avoid when caching is involved, as other posters have stated) due to the length of the generated hashes and being based on an ever increasing timestamp.

An added bonus of making the file names shuffle randomly is that it prevents external users from hotlinking or other nefarious tricks. This isn't so much of a problem with CSS, but can be with JS.

Upvotes: 0

hymloth
hymloth

Reputation: 7035

This is a trick to store static files, by hashing them.

The purpose of this storage is to keep serving old static files' versions in case some pages still refer to them, e.g. because they are cached by you or a 3rd party proxy server. Additionally, it’s very helpful if you want to apply far future Expires headers to the deployed files to speed up the load time for subsequent page visits.

Upvotes: 2

Sam
Sam

Reputation: 976

Those filenames look like they are being hashed and/or versioned. This is likely to ensure that the correct styles, JavaScript and assets are being loaded all the time. It could also be the result of being machine generated or minified.

Upvotes: 1

Jan.J
Jan.J

Reputation: 3080

It's probably name generated by some kind of minifier/obfuscator.
It's complicated because every compilation of CSS/JS scripts creates new version of scripts and to prevent browser from load old version from cache should have new name.

Upvotes: 0

Related Questions