JavaScript Minification

In the process of developing a website or web application, the code file can become large. The reasons for this could be a result of the type of project and dependencies, framework bundles, and so on.

When a project becomes large, load time is impacted, which then affects the performance of the website or application.

This is why the concept in web development called minification exists. Minification involves reducing the size of code files by removing unnecessary characters to improve website performance.

We’ll be elaborating on this concept in this article, understanding how it affects the functionality of a website and so on.

>Minification as a course of action involves the reduction of code and markup in a web page or script file.

This practice is used in web development and helps to reduce bandwidth usage on websites or applications, which is beneficial to users, especially those with a limited data plan.

The process of minification entails the removal of unnecessary codes or characters from files to reduce their size. Minification is related to HTML, CSS and JavaScript files, and performs the following:

• Remove whitespaces and newlines
• Remove block
• Remove comments
• Giving short names for variables and functions

This way, the file loads easily in the browser, which increases load time. There are many reasons why developers use a minification tool. For instance, using a minification tool;

• Test how minification can affect code size
• Prepare code for the production environment
• Promote better workflow practices
• Prevent code tampering (however, note that other security practices must also be implemented as well))

Minification is used in:

Frontend Build Tools: Webpack Gulp, and Parcel, are tools designed to simplify the process of minifying HTML, CSS and JavaScript files.

• Webpack: Webpack is a module bundler for JavaScript applications that can compile and bundle assets into single or multiple output files.

• Gulp: Gulp is a toolkit to automate slow and repetitive tasks such as bundling and minifying libraries and stylesheets, running code analysis, and much more.

• Parcel:Parcel is a zero-configuration build tool for the web, designed to automate, build, bundle, and optimise web applications. It offers minification for JavaScript and CSS when you build using parcel build. It also includes image resizing, optimization, and much more.

Content Delivery Networks (CDNs): CDNs are a system of distributed servers that work together to deliver web content to users based on their geographical location. They can also provide minified versions of website assets.

If we are familiar with using libraries, we may have seen that many libraries use min.js or min.css suffix

Example - This CDN link to the minified file of font-awesome has the suffix min.css,

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css

which means that the files have been compressed to optimise performance. Some CDNs are optimised for production, which you can use in your applications.

Application Programming Interface (API) response: API responses can be minified to save bandwidth; for instance, a library called json-minify can be used to minify json-response. Also, some API services provide built-in responses for minification.

Here’s an example of a file that has been minified and one that hasn’t been. This example shows the URL which is a bootstrap JavaScript file. It is hosted on jsDelivr, a content delivery network that helps in including the bootstrap framework into a project for layout and styling.

The above image is what it looks like when it is minified, and if we look at the URL you’ll see the .min suffix.

If we take a look at the above image that shows the URL without the .min suffix, we can see that the predefined JavaScript functions have more space between them. Now that you've seen the difference between a normal and minified file, let’s go through some benefits of minification.

Benefits of Minification

Benefits of minification include;

Storage Space: Minifying JavaScript files can significantly save storage space. For instance, backing up web applications would require less storage.

Smaller File Size: It decreases JavaScript file size and download time, which makes it load faster on the web page.

Speed: Minifying JavaScript speeds up the execution of JavaScript scripts.

Search Engine Optimization (SEO): Minifying JavaScript increases SEO and user experience.

Reduced Server Load: Combining multiple JavaScript files into a single minified file reduces the number of HTTP requests to the server.

Limitations of Minification

There are different limitations of minifying JavaScript, and they include;

Difficult to Understand: After white spaces and comments are removed, the JavaScript file can be challenging to understand.

Complexity in Debugging: Tracking an error in a minified code can be challenging because it removes formatting, which makes it challenging to understand during troubleshooting.

Need Other Performance Techniques: Minification can be incorporated with other performance-enhancing techniques. For instance, source maps are relied upon to map minified code back to its original state, and they can also add complexity to the build process.

Unexpected Outcomes: Changes made to JavaScript code can cause issues that lead to unexpected outcomes.

There are many tools used to minify JavaScript files, and they include:

Terser

Terser is an industry-standard minifier for JavaScript code. It shrinks variable names, white spaces and comments, and removes unused code.

Minify

Minify is a tool that reduces the size of JavaScript code by removing whitespace, strips comment, combines files, and optimises/shortens a few programming patterns. It's also used for CSS and HTML files and overall improves website performance.

JSCompress

JSCompress is an online tool that minifies JavaScript Files. It reduces the size of code by removing unnecessary characters such as line breaks, space, etc. It doesn't require installation; all you need to do is copy and paste your JavaScript code and it will minify it.

UglifyJS

UglifyJS is a JavaScript parser, compressor, minifier and beautifier toolkit. It can be used to combine and minify JavaScript assets so they require less HTTP which makes the site load faster.

Minification is often mixed up with bundling because both techniques are used in the process of optimising web applications. Bundling is simply the process of combining multiple files like JavaScript and CSS into a smaller or single file.

The purpose of bundling is to reduce the number of HTTP requests a browser makes when loading a webpage. This means that when the browser makes fewer requests, it can improve the time it takes to load the web page or pages.

Minification is used in bundling modern build tools, such as Webpack, Rollup, and parcel. After files are bundled, minification is applied to the bundle to further reduce the size of the bundled files.

Minification is a great way to reduce JavaScript files, and it’s also a way to reduce HTML, and CSS files as well. The significance of minifying JavaScript files is to optimise web performance. For instance, if a file is 16kb, by minifying the code, the size of the file can be reduced to 10kb - this reduces storage space and makes it faster to load files.

Many modern frameworks like React and Angular, including build tools such as Webpack come with built-in support for minification during the building process. This means developers do not have to manually configure minification when building applications for production. However, it's also important to know how to configure minification or enable it depending on the framework or tool.