What is UglifyJS?
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.
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.
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
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:
--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.
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
--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.