Minify JavaScript Files with UglifyJS
What is UglifyJS?
UglifyJS is best known as a JavaScript minifier. Minification is a valuable performance enhancing technique as it removes whitespace and unnecessary characters within a file to make it smaller and thus, load faster. There are a few different aspects of a website which can be minified including HTML, CSS, and JS, although UglifyJS focusses solely on minifying JavaScript.
Apart from minification, UglifyJS also contains a few other tools that help automate working with JS including:
- A parser
- A code generator
- A compressor (optimizer)
- A mangler
- A scope analyzer
- A tree walker
- A tree transformer
For the scope of this article, we'll cover how UglifyJS's minification/compression features works and what options available to users.
Installing UglifyJS
As of writing this article, UglifyJS is now in its third version. You'll find two repos for UglifyJS on GitHub however, you should reference the most recent one located here.
UglifyJS can be installed via npm. Therefore, you'll need to make sure you have the latest version of Node.js installed.
There are two slightly different commands which can be used to install UglifyJS depending on your use case.
To use UglifyJS as a command line app:
npm install uglify-js -g
To use UglifyJS for programmatic use:
npm install uglify-js
Usage options
There are myriad of usage options available in UglifyJS. The API reference on GitHub outlines a list of options available and also include structure examples. If you'll be using the API and need a quick reference to each features list of options, check the following links:
Using --compress alone will result in a certain level of size savings, however, using only this option will not the provide the savings you could be achieving. To further minify your JS files, it's recommended to implement at least some of the options mentioned in the links above. Things like dead_code to remove unreachable code, sequences to join consecutive simple statements using the comma operator, or join_vars to join consecutive var statements.
Furthermore, another useful feature to enable is Mangle. This will change the name of a variable, property, etc. into one letter and remove the unused functions and variables. Therefore, files are smaller due to fewer characters being used.
Examples
To help demonstrate the effectiveness of using a minifier on a JavaScript file, we'll go over a couple of examples using the CLI. With UglifyJS installed and a JavaScript file ready, let's see how much we save in terms of file size. For this example, we'll use a copy of Jquery-3.2.1.js. The CLI command we'll use for starters is the following:
uglifyjs jquery-3.2.1.js --output jquery-3.2.1.min.js
These are UglifyJs's default settings and basically defines what the input file is and what the output file should be called. Already, the size savings are quite good. The original file started at 268 KB in size and after being run through UglifyJS is now just 136 KB in size.
Now, let's run another test, this time with mangle enabled. The CLI command used in this case looks like:
uglifyjs jquery-3.2.1.js --compress --mangle --output jquery-3.2.1.min.js
With --mangle defined, this further reduces the size of the Jquery file even more. The new Jquery file is now only 87 KB as opposed to 136 KB.
Depending on your personal preference, amount of size savings you want to achieve, and the way your JS file is structured, you may want to define other directives within your commands. For example, if you'd like to enable sequences, conditionals, and booleans you can do so with the following:
uglifyjs jquery-3.2.1.js --compress sequences=true,conditionals=true,booleans=true --mangle --output jquery-3.2.1.min.js
In most cases, implementing additional techniques on top of the default minification is beneficial as it helps further reduce file sizes. Minified files aren't meant to be pretty, hence the name "Uglify", although they do provide significant savings and therefore, happy website visitors.
Summary
UglifyJS provides many options for those who need to minify their JavaScript files. It allows you to be quite granular in how much you want to reduce your file sizes which is great. Furthermore, you can integrate UglifyJs programmatically so that it runs within your application or you can simply minify files from the command line.