Why is Minification used?

Minification allows to reduce JavaScript file size that has a positive impact on load times and bandwidth usage. As a result, site speed and accessibility is higher compared to sites that don't use minification. Other words, minification tangibly improves user experience.

How does JavaScript Minification work?

Minification process is performed by a software or utility that analyzes and rewrites source code to reduce its size. Usually, minification process includes removal of whitespaces, shortening of variable names, and verbose functions replacement. Minification is performed on the server side and only when the source file is changed.

Looking for a tool to optimize your CSS code?

Try Minify-CSS.com

Minify JS Online

Q: What is JavaScript Minification?

Minification, or minimization, of JavaScript source code is the process removing all characters that aren't required for proper execution. These unnecessary characters usually include formatting characters, like: whitespaces, linebreak characters, comments, and in some cases block delimeters and end-of-line characters. After minification is applied, JS code is supposed to keep its functionality.

Online JavaScript minification tool powered by Terser v5.20.0

Test the minification tool with the most popular libraries. Pick a library source to load:

What is Minify-JS.com?

Minify-JS.com is an online tool that allows you to reduce the size of JavaScript code up to 80%. The minify js tool uses the Terser utility that is compatible with the ES6+ standard. Minify-JS.code also includes helpful resources, best practices, configuration examples, and usage guides related to the JavaScript minification process.

What is JavaScript minification?

For many years JavaScript was developing and upgrading as a programming language. It started as a scripting language for websites. Now it is widely using on servers, mobile devices, and even desktops. When it comes to websites and web applications, developers are facing many restrictions. There are two that they can hardly manage: bandwidth size and user connection speed score.

During the latest decade, web applications got more complex than ever before. At the same time, users started using mobile devices more often than ever before. JavaScript source code bloated to megabytes, and that has got a real pain for internet surfers, especially for mobile users, who are connecting through low 3g. The most popular search engine cares (at least they claim) about user experience, and it counts bandwidth size and page load time when ranks websites in the search feed. That’s where asset optimization is helping us.

One of the tasks of asset optimization is deliverable code minification. Minification stands by reducing source code size by converting it to the optimized version removing unnecessary characters, comment blocks, shortening local variables and function names. In some cases, minification can save up to 80% of the javascript file size. Benefits are predictable – faster page loads lead to better accessibility that enhances user experience and search engines ranking site better.

JavaScript minification examples

The best way to understand js minification is to look at some examples. Here’s the simple one that illustrates how JavaScript minification works:

var isFriendly = true;

if (isFriendly) {
console.log('Hello world');
}

This code snippet can be converted to the following if minified:

var isFriendly=!0;isFriendly&&console.log("Hello world");

Let us have a closer look. First of all, you can see that all unnecessary characters, like whitespaces, line breaks, and curly brackets removed. It is a simple change but saved us few bytes. Also, we can see that Boolean "true" (which takes 8 bytes) was converted to "!0" (4 bytes). Finally, the "if" statement got replaced with a conditional operator statement. As a result, we get minified JavaScript code snippet that does the same job but takes 40% less physical memory when saved.

What solution is best to use for JavaScript minification?

There are many options to minify javascript code. Official PageSpeed Insights documentation recommends minifying JavaScript using the UglifyJS utility. As an alternative, it recommends trying the Closure Compiler tool. If you are serving your site with Apache or Nginx, you might like to use PageSpeed Module that applies various optimization features to your content, including static resources optimization.

There is no Apache/Nginx PageSpeed Module usage statistics, but I assume that it’s not so popular compared to JavaScript packages of uglify-js and google-closure-compiler. Though google-closure-compiler (checked on 6 Jun 2021) has 125,756 weekly downloads, it’s officially deprecated. Uglify-js package got used by many people and has as many as 13,709,059 weekly downloads.

A new version of EcmaScript is released and brings new syntax rules every year. At the moment, the UglifyJS parser doesn’t support ES6, and it’s not going to get supporting it soon. An UglifyJS fork called uglify-es used to be a default option to handle new standard code minification. In 2018, it deprecated. A Terser tool got a default solution to minify ES6+ compilable code.

Terser is a toolkit for parsing and compressing JavaScript code. Terser is a fork of deprecated uglify-es. Like its predecessor, Terser is compatible with CLI and API of well-known uglify-js utility, so if your existing project use uglify-js, you probably don’t have to put any changes to your minification configuration.

As ES6 gets more widely used, Terser is becoming more popular (18,564,384 weekly downloads) among developers and has a great support and active contributors community. Terser is the primary solution to minify JavaScript in webpack, Angular, Next.js, and other popular tools and frameworks.

In conclusion, the obvious solution to solve the JavaScript minification problem in 2021 is Terser. It’s also a great option to upgrade your project build stack if it’s been using UglifyJS.

How to setup minification with Terser?

Terser has an npm module that provides a tool with a command-line interface and API for programmatic usage. Terser CLI command structure is:

terser [input files] [options]

By default, minified output goes to STDOUT. If you’d like to put it in the file, specify the file name as a value of the --output (or -o) option.

Terser minify high-level function can be used in your JavaScript application if installed with npm. It accepts various configuration options that allow you to control every step of the process.

import { minify } from “terser";

var code = "function add(first, second) { return first + second; }”;
var result = await minify(code, { sourceMap: true });
console.log(result.code);
console.log(result.map);

The minified output of the code variable snippet is: 

function add(n,d){return n+d}

As we can see, long variable names got replaced with one character names output, unnecessary whitespaces got removed, and output code snippet is almost twice shorter as input.