A short yet detailed review of useful JS compression tools and libraries for 2019

Lotanna Nwose

·

Follow

Published in

Bits and Pieces

·

7 min read

·

Nov 26, 2018

--

2

Listen

Share

As Javascript developers, we always want faster compile time and one of the biggest things that facilitates fast compilation is the size of the javascript files being compiled.

What is Code Compression?

To compress, minimize or minify code simply refers to removing unnecessary characters from the source code like white spaces, new line characters and a host of redundant data without actually affecting how the code or resource as a whole is processed by the browser. This is a very effective technique otherwise called code minimization that improves the load time of the application and by implication the overall web performance because of a smaller file size.

How Javascript Code is Compressed

Javascript code can be compressed in one or more of the following ways:

• By removing white spaces and indentation.
• By shortening variable names to single characters.
• By removing new line characters.
• By joining closely placed variable declarations.
• By trying to turn arrays to objects wherever it is possible.
• By optimizing Conditional statements.
• By finding answers to simple constant expressions.
• By removing comments.

We would now look different tools used as an online service, or in a graphical user interface or even in the command line to compress javascript code in no particularly confirmed order.

Tip: You can use tools like Bit to isolate, organize and reuse your JS components across projects. Each component will also be individually built and tested, to understand its performance. It’s OSS, so feel free to give it a try.

Google Closure Compiler

As accurately as you would expect, google has a javascript minifier too. The Google Closure Compiler is with over 4500 ⭐️on github is such a great tool; it is optimized for both efficiency and speed and there is constant support around it. It removes redundant code, evaluates your entire code base and rewrites it in a more efficient way diminishing leftovers. It is also a wonderful syntax checker, it checks variable references and even types and intuitively shows warnings. It is a perfect tool with a very extensive, easy-to-use getting started documentation which is something other alternatives are not getting right.

Packer

Packer by Dean Edwards is an online javascript minifier that is a very popular paste-and-compress service. Just paste your javascript code and hit pack, it automatically outputs the compressed version for you. It can also optionally do more advanced stuff like decompression.

Uglify js

Uglify with over 7 million downloads every week and close to 8000 ⭐️ is one of the most used javascript file minifiers around. It used to have an online service but it got discontinued, but it has an NPM package you can get here and simply install locally with a line of command.

npm install -g uglify-js

YUI Compressor

With almost 3000 ⭐️ on github, the yui compressor is a stylesheet and javscript file compressor written in Java. It is a command line tool that aids in very fast code compression and the compression rate is arguably one of the highest compared to other alternatives and safety was a main factor that was considered in the design process. Also comes with an easy to read documentation even in the terminal. You can get started with a line of command.

java -jar yuicompressor-x.y.z.jar

Terser

With almost 1 million downloads every week, Terser is one of the most used javascript compression library all year. Currently at version 3.10.12, Terser became a necessity when uglify-es was no longer maintained and there was no support for es6. It became a fork of uglify-es retaining the CLI compatibility and API with uglify-es and the latest uglify-js version. It can of course be installed through NPM:

npm install terser -g

It is well and regularly maintained, this is probably why it is very widely used, the last commit to the project is actually few hours ago.

Minify

With over 21,000 downloads every week, Minify is a very consistent javascript compressor maintained by coderaiser. It already has about 120 versions with the latest commit a few days ago. It is regularly maintained and you can also get it through an npm install command.

npm i minify

then you can use it inside your project as a promise like so:

const minify = require('minify');minify('./client.js').then(console.log).catch(console.error);

Dan Tool’s Javascript Minifier

This is a web based javascript compressor with paste-and-compress capabilities you can use to create your .min files with ease. It is also regularly maintained by Dan Tools and there is a suite of other javascript develoment tools on the platform. There is also a good support for questions and discussions.

Node-Minify

Node-Minify is a powerful Node js module built for compression of javascript and html files. When you install the module, you can then choose from a suite of supported compression libraries to use to minify your file, really cool. installation is with this line of command:

npm install node-minify

It has a very extensive documentation you can access here and it is currently in version 3 and regularly maintained.

Ajaxmin

Microsoft’s Ajax Minifier by Ron Logan and a few community contributors can efficiently minify your files and can even produce a source for javascript files if you want. After compression, you can use it as is without doing anything special to it to get your browser to download it or get results.

Producify

Producify is a command line tool that handles processes to help present your project as a complete product; processes like parsing markdown, bundling stylesheet files and more importantly compressing javascript files among others. The last commit to this project was some months ago, you can install and use through node package manager like so:

npm -g i producify

It has a very well documented cli use options that shows up in your terminal after installing globally once you run:

$ producify

Snappy

Snappy, formerly known as zippy is a compression and decompression library with over 3000 ⭐️on github. It was designed with very high speed in mind, sacrificing a shot at the highest compression library or compatibility with other libraries. For Node js files, there is an NPM package that handles minifying files. Get it here, it is downloaded over 75,000 times every 7 days. Snappy is seriously maintained (the last commit is some weeks old) and very robust. You can install with an npm install command in your terminal:

npm install snappy

Honorable mentions

Conclusion

In this article, we saw the need for js file compression and various tools and libraries that provide developers the platform to easily minify files based on their own values like speed, efficiency, compression ratio. I would like to know your favorite javascript compression tool down in the comments.

Learn more