Loading...

Reduce Java Script content serving

:heavy_exclamation_mark: This post is older than a year. Consider some information might not be accurate anymore. :heavy_exclamation_mark:

To improve page speed on websites, one technique is to deliver less java-script files than leave them in their original state. While it is good for maintenance and separation of concerns to isolate or have a component structure, it isn’t in the way presenting or serving the content. This post demonstrate how to minify, or in the same sense uglify, your java script code with the node package uglify-js.

UglifyJS is a JavaScript parser, minifier, compressor and beautifier toolkit.

UglifyJS

I do assume you are familiar with node, and therefore can install uglify with npm.

sudo npm install -g uglify-js

Example minimization of input.js, writing the to output.min.js

uglifyjs --compress --mangle -- input.js > output.min.js

You may use tools like gulp or grunt to automatize the minimization of your java script files. It doesn’t stop with your own files. For instance using third party solutions like lunrjs. The lunrjs version 2.0.4 doesn’t provide any minimized version of its script. UglifyJS does a pretty good job.

Another challenge is to merge the minimized versions into one single java script file. Just loop over your minimised versions and append them to your desired java script file, e.g.

for i in $(ls *.min.js); do cat $i >> ~/build/cinhtau.min.js; done

This is one of several solutions to reduce the delivery of java script files for your website. So far it was the simplest one.

Please remember the terms for blog comments.