JavaScript/Minification

Minification is the process in which a source code is reduced in length without affecting functionality. This means removing whitespaces and new lines outside of strings and discarding all comments. Some minifiers also shorten variable names.

Minification is employed by some sites like YouTube and Twitter which use large (megabyte-sized) JavaScript files, to speed up loading. For smaller sites, it might not be necessary if end-to-end compression is activated, meaning the server compresses data using a format such as gzip before sending it to the visitor's browser, reducing the size more than minification would, and the visitor's browser decompresses it, meaning the process is transparent to the user. Lack of minification also reduces the complexity of maintenance.

Since minified code is difficult to read, it is not intended to be directly worked on. The reverse process, prettification, adds back new lines and indentations. However, it can not restore names of variables and functions if they were shortened during the minification.

As an experiment, the small one-click saver script has been run through three online services for code minification. Additionally, two backticks ("`") separated by two new lines have been appended to the input script to see if they are converted to a single-line string with backslash-N's ("\n\n"). Here is a comparison of the results.

Minify-JS.com

Minify-JS does both convert new lines into backslash-N's and convert "true" statements into "!0" to save two bytes each. Function and variable names are also converted to single-character names.

function download(e,n){var t=document.createElement("a");t.setAttribute("href","data:text/plain;charset=utf-8,"+encodeURIComponent(n)),t.setAttribute("download",e),t.style.display="none",document.body.appendChild(t),t.click(),document.body.removeChild(t)}function oneClickSave(e,n){download((document.title&&e?document.title+".":"")+window.location.hostname+"."+(null!=n?n+".":"")+(new Date).toISOString().replace(":","-").replace(":","-")+".DOM.html","\x3c!-- Downloaded on "+(new Date).toISOString()+" from "+document.location+" using oneClickSave. --\x3e\n"+(new XMLSerializer).serializeToString(document))}function download(e,n){var t=document.createElement("a");t.setAttribute("href","data:text/plain;charset=utf-8,"+encodeURIComponent(n)),t.setAttribute("download",e),t.style.display="none",document.body.appendChild(t),t.click(),document.body.removeChild(t)}function oneClickSave(e,n){download((document.title&&e?document.title+".":"")+window.location.hostname+"."+(null!=n?n+".":"")+(new Date).toISOString().replace(":","-").replace(":","-")+".DOM.html","\x3c!-- Downloaded on "+(new Date).toISOString()+" from "+document.location+" using oneClickSave. --\x3e\n"+(new XMLSerializer).serializeToString(document))}oneClickSave(!0),oneClickSave(!0),console.log("\n\n");

TopTal

The minification tool by TopTal delivers a similar result as above. However, the multi-line string inside the backticks is not converted to a single-line string.

function download(e,t){var o=document.createElement("a");o.setAttribute("href","data:text/plain;charset=utf-8,"+encodeURIComponent(t)),o.setAttribute("download",e),o.style.display="none",document.body.appendChild(o),o.click(),document.body.removeChild(o)}function oneClickSave(e,t){download((document.title&&e?document.title+".":"")+window.location.hostname+"."+(void 0!=t?t+".":"")+new Date().toISOString().replace(":","-").replace(":","-")+".DOM.html","<!-- Downloaded on "+new Date().toISOString()+" from "+document.location+" using oneClickSave. -->\n"+new XMLSerializer().serializeToString(document))}function download(e,t){var o=document.createElement("a");o.setAttribute("href","data:text/plain;charset=utf-8,"+encodeURIComponent(t)),o.setAttribute("download",e),o.style.display="none",document.body.appendChild(o),o.click(),document.body.removeChild(o)}function oneClickSave(e,t){download((document.title&&e?document.title+".":"")+window.location.hostname+"."+(void 0!=t?t+".":"")+new Date().toISOString().replace(":","-").replace(":","-")+".DOM.html","<!-- Downloaded on "+new Date().toISOString()+" from "+document.location+" using oneClickSave. -->\n"+new XMLSerializer().serializeToString(document))}oneClickSave(!0),oneClickSave(!0),console.log(`

`);

DuckDuckGo

The search engine has an integrated JavaScript minifier accessible by searching for minify JavaScript. Similar search terms might work as well.

The minifier of DuckDuckGo retains the original function and variable names, does not convert "true" statements into "!0", and does not convert the multi-line string in the backticks to a single-line string. The benefit of retaining the original function and variable names is that this allows for more readable code when prettified, which is the opposite process of minification.

function download(filename,text){var tmp_node=document.createElement('a');tmp_node.setAttribute('href','data:text/plain;charset=utf-8,'+encodeURIComponent(text));tmp_node.setAttribute('download',filename);tmp_node.style.display='none';document.body.appendChild(tmp_node);tmp_node.click();document.body.removeChild(tmp_node)}function oneClickSave(include_title,comment){download((document.title&&include_title?document.title+".":"")+window.location.hostname+"."+(comment!=undefined?comment+".":"")+new Date().toISOString().replace(":","-").replace(":","-")+".DOM.html","<!-- Downloaded on "+new Date().toISOString()+" from "+document.location+" using oneClickSave. -->\n"+new XMLSerializer().serializeToString(document))}oneClickSave(true);function download(filename,text){var tmp_node=document.createElement('a');tmp_node.setAttribute('href','data:text/plain;charset=utf-8,'+encodeURIComponent(text));tmp_node.setAttribute('download',filename);tmp_node.style.display='none';document.body.appendChild(tmp_node);tmp_node.click();document.body.removeChild(tmp_node)}function oneClickSave(include_title,comment){download((document.title&&include_title?document.title+".":"")+window.location.hostname+"."+(comment!=undefined?comment+".":"")+new Date().toISOString().replace(":","-").replace(":","-")+".DOM.html","<!-- Downloaded on "+new Date().toISOString()+" from "+document.location+" using oneClickSave. -->\n"+new XMLSerializer().serializeToString(document))}oneClickSave(true);`

`;