Skip to content

How to Minify JavaScript: A Step-by-Step Guide for Beginner Devs

If you’re a web or app developer looking for ways to improve the performance of your pages, one improvement you’ll want to seriously consider is JavaScript minification. In this post, I’ll show you how to minify JavaScript and what tools you can use to minify JavaScript, depending on your current tech stack.

It’s also good to know what exactly JavaScript minification is and why you’d want to do it, so let’s start with that. If you want to jump ahead to the tools, feel free to use the table of contents links below.

How to Minify JavaScript

📚 Table of contents:

  1. Why minify JavaScript? #
  2. The benefits of JavaScript minification #
  3. Minification vs obfuscation #
  4. Online tools to minify JavaScript #
  5. Minify JavaScript with other tools and services #

Why minify JavaScript?

As I’ve already alluded to, code minification is one way to improve the performance and speed of your web pages. To demonstrate what JavaScript minification looks like, take a look at the following code example, which is a common JavaScript debounce function:

let doResizeResult = () => {
  console.log(window.innerWidth);
}

// main function
let debounce = (callback, delay) => {
  let myTimeout;
  return () => {
    clearTimeout(myTimeout);
    myTimeout = setTimeout(() => {
      callback()
    }, delay);
  };
};

let doDebounce = debounce(() => doResizeResult(), 1000)

window.addEventListener('resize', () => doDebounce());
Code language: JavaScript (javascript)

The above code is easy to read, has correct indenting, includes spaces in between operators, and double-spacing between certain lines of code. It’s not required to write JavaScript this way, but it helps with readability. This example also includes a comment within the code.

If I were to use a JavaScript minifier to minify that code, it would then look something like this:

let doResizeResult=()=>{console.log(window.innerWidth)},debounce=(e,d)=>{let n;return()=>{clearTimeout(n),n=setTimeout(()=>{e()},d)}},doDebounce=debounce(()=>doResizeResult(),1e3);window.addEventListener("resize",()=>doDebounce());
Code language: JavaScript (javascript)

I’ve pasted the easy-to-read version of the code snippet into an online JavaScript minifier (see examples later). The minifier has generated another version of the exact same piece of code – except now the code is minified. This means unnecessary spaces and line breaks are removed to ensure the code is as small as possible. In this case, it also removed the code comment.

Please note that you would never minify the JavaScript that you intend to edit and maintain. This would be counterproductive. JavaScript minification is for the code that you’re going to push to your production website. If you’re working on JavaScript in a developer environment, you would keep the pre-minified version of the code intact.

The benefits of JavaScript minification

To give you an idea how much of the file size is saved when minifying a snippet like the one above:

  • Before minification: 384 bytes
  • After minification: 232 bytes

This would be for minification only, and doesn’t include other forms of compression like gzip. This also doesn’t use a form of minification that reduces the size of variable names, function names, and other parts of the code. Now imagine this type of improvement is made on hundreds of lines of code! That’s a big boost to your app’s performance just on simple minification alone.

This should sufficiently demonstrate why you’d want to look into how to minify JavaScript. But before getting to the tools you can use to minify JavaScript, I’ll briefly consider one other related topic.

Minification vs obfuscation

Minifying JavaScript isn’t the same as JavaScript obfuscation. That being said, it is true that minification will make your JavaScript harder to read. But it’s not completely “obfuscated” and it’s easy to beautify (i.e., “unminify”) JavaScript code. JavaScript obfuscation looks quite different.

Let’s go back to the same snippet from the previous section. Here’s what that snippet would look like when I run it through an online JavaScript obfuscator:

var _0xc3ef=["\x69\x6E\x6E\x65\x72\x57\x69\x64\x74\x68","\x6C\x6F\x67","\x72\x65\x73\x69\x7A\x65","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72"];let doResizeResult=()=>{console[_0xc3ef[1]](window[_0xc3ef[0]])};let debounce=(_0xf855x3,_0xf855x4)=>{let _0xf855x5;return ()=>{clearTimeout(_0xf855x5);_0xf855x5= setTimeout(()=>{_0xf855x3()},_0xf855x4)}};let doDebounce=debounce(()=>{return doResizeResult()},1000);window[_0xc3ef[3]](_0xc3ef[2],()=>{return doDebounce()})
Code language: JavaScript (javascript)

Although some parts of the code are still intact, you can see that most of the code is completely different and unreadable.

The purpose of JavaScript obfuscation is to not allow others to “steal” the code, while also minifying it. But this is somewhat of a pointless endeavor since the code can technically be “deobfuscated.” Also, front-end technologies are part of the open web platform and so JavaScript code is difficult to protect via copyright.

Thus, you can minify JavaScript alone; JavaScript obfuscation is overkill in most cases.

Online tools to minify JavaScript

Now that I’ve covered the basics on why you’d want to minify JavaScript and its benefits, let’s consider some useful online tools. These allow you to instantly convert regular JavaScript code to minified code in a few clicks.

Many of the listed tools work similarly, but they differ in how the code can be added (e.g., via upload, direct input, etc). Also, some of the tools have configuration options for specific types of minification, including options for obfuscation.

Toptal JavaScript Minifier

This online minifier service from Toptal allows you to minify your JavaScript directly on the page. You also have the option to minify it by means of a POST request using their API.

Toptal JavaScript Minifier is a great tool to minify JavaScript

Digital Ocean’s JavaScript Minify Tool

The Digital Ocean minify tool offers a number of different configuration settings, including the ability to remove unused code and stray console.log() statements along with minification. You can also choose from three configuration presets for quicker minification.

Digital Ocean's JavaScript Minify Tool

Minify

Minify is a simple JavaScript minifier that also minifies CSS. You can use it directly online using the home page tool, or as a CLI tool that will allow you to minify and combine multiple files. This one also includes a test suite.

Minify, as the name implies, is a useful tool to minify JavaScript

bundlejs

bundlejs is different from the other JavaScript minification tools in this list. This one allows you to interactively test what your bundle sizes will amount to after combining and minifying all your packages. You can use it as a minifier or simply as a bundle size checker, and it has various configuration options.

bundlejs

JSCompress

JSCompress is an online JavaScript minifier that uses UglifyJS and babel-minify under the hood. This tool allows you to copy and paste your JavaScript or upload one or more files to combine files for minification and compression.

JSCompress

JavaScript Minifier by FreeFormatter.com

This online minify tool lets you minify by direct copy/paste or by file upload. You can select the type of encoding for your file and this one will also adjust variable names in the code to make them smaller, for increased optimization.

JavaScript Minifier by FreeFormatter.com

Minify JS Online

A simple tool for minifying JavaScript via copy/paste. This is as simple as these tools get, and it also includes a few one-click tests that allow you to see how specific JavaScript libraries get minified.

Minify JS Online

JavaScript Minifier by BeautifyTools

This online minifier will instantly minify your JavaScript and you have the option to enter your code in multiple ways. You can copy/paste, load via URL, or load a local JavaScript file.

JavaScript Minifier by BeautifyTools

JS Minify

This tool allows you to minify by direct input, or you can upload a JavaScript file. Usefully, you also have the option to check various boxes to “mangle” various parts of the code (similar to obfuscation) and keep comments and original quotes.

JS Minify

Minify JavaScript with other tools and services

In most cases, once your website’s CMS or build system is in place, minifying JavaScript is something you’ll be doing automatically, rather than manually. This is possible by means of plugins and build tools, depending on your setup.

For example, if you run a WordPress website, there are plugins that will offer a series of options including file caching, compression, and of course CSS and JavaScript minification.

If you use one of the many JavaScript build tools available, like Webpack, Parcel.js, esbuild, Snowpack, and so on, then minification can be done automatically. Your development code will be unminified, but whenever you’re ready to push your changes to production, your new code will automatically be built with your selected features, including JavaScript minification.

One popular tool you can use when minifying JavaScript as part of a build process is UglifyJS, mentioned earlier. This is a full-featured compressor/minifier that many tools use under the hood, and which you can also use yourself.

UglifyJS

There are also content delivery networks (CDN) and related services that allow you to minify your JavaScript automatically as it’s served from your website. This is similar to on-the-fly image optimization.

JsDelivr

One such service is JsDelivr. JsDelivr is a fast CDN that’s free for open-source projects and optimized for delivering JavaScript content from npm and GitHub. As explained in their documentation:

We will first attempt to locate a minified version of the file…(by removing the extension, and looking for the same file .min.js). If we can’t find one we will minify ourselves.

This provides strong performance by means of the delivery itself, along with minification if needed.

Wrap-up of how to minify JavaScript

I hope the tools and suggestions presented above will help you understand how to minify JavaScript on your websites and apps and what the benefits are. As shown above, there are a number of tools that you can use to minify your JavaScript. Some of these are online tools that you can use interactively. Others are part of a larger website build system and sometimes using a CMS.

Whatever the case, JavaScript minification will benefit your users by providing content that loads faster, enabling a better overall user experience.

Don’t forget to join our crash course on speeding up your WordPress site. Learn more below:

 
Yay! 🎉 You made it to the end of the article!
Louis Lazaris

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...