JavaScript and CSS minification.

I’m discussing minification of JavaScript and CSS using UglifyJS 3 and UglifyCSS packages.

JavaScript and CSS minification.

In my understanding, UglifyJS 3 is the most popular JavaScript minifier tool presently – it has a very high weekly download too. And as per the official documentation, it supports ES6.

For CSS, I’ve tried UglifyCSS, and it seems to do what it’s supposed to do. The last publication date for this package is about 5 ( five ) years ago. Its weekly download is around 40,000+ ( forty thousands plus ) times.

Both of these require NodeJS – the version I have installed is v18.12.0. Follow the instructions, I’ve chosen to install them globally on my Windows 10 Pro version 10.0.19044 Build 19044:

Installing UglifyJS 3 globally:

npm install uglify-js -g

Installing UglifyCSS globally:

npm install uglifycss -g

Their executable scripts are:

C:\Users\behai\AppData\Roaming\npm\uglifyjs
C:\Users\behai\AppData\Roaming\npm\uglifycss

Where behai is the Windows user I’ve logged in with, and installed the two packages.

Following are two Windows batch files I’ve written for my project:

Content of F:\my_project\minify\js-minify.bat

@echo off

echo Final output file is my_project.min.js when finished.

C:\Users\behai\AppData\Roaming\npm\uglifyjs ^
    D:\Codes\WebWork\jquery\js\jquery-3.6.0.js ^
    D:\Codes\WebWork\bootstrap\dist\js\bootstrap.bundle.js ^
    D:\Codes\WebWork\parsley\dist\parsley.js ^
    D:\Codes\WebWork\js\date_funcs.js ^
    D:\Codes\WebWork\js\mime_types.js ^
    D:\Codes\WebWork\js\http_status.js ^
    D:\Codes\WebWork\js\drags.js ^
    D:\Codes\WebWork\js\bootstrap_funcs.js ^
    D:\Codes\WebWork\js\bootstrap_dialogs.js ^
    D:\Codes\WebWork\js\client_dialogs.js ^
    D:\Codes\WebWork\js\ajax_dialog.js ^
    D:\Codes\WebWork\js\elem_height_funcs.js ^
    F:\my_project\src\my_project\static\js\my_project.js ^
    --compress --mangle -o F:\my_project\src\my_project\static\js\my_project.min.js

Content of F:\my_project\minify\css-minify.bat

@echo off

echo Final output file is my_project.min.css when finished.

C:\Users\behai\AppData\Roaming\npm\uglifycss ^
    D:\Codes\WebWork\bootstrap\dist\css\bootstrap.css ^
    D:\Codes\WebWork\bootstrap\icons-1.9.1\font\bootstrap-icons.css ^
    D:\Codes\WebWork\parsley\src\parsley.css ^
    D:\Codes\WebWork\css\bootstrap-common.css ^
    F:\my_project\src\my_project\static\css\my_project.css ^
    --output F:\my_project\src\my_project\static\css\my_project.min.css

my_project.min.js is around 227 KB ( two hundreds and twenty seven kilobytes ); and my_project.min.css is around 241 KB ( two hundreds and forty one kilobytes ). They’re fairly sizeable as anticipated, and I have tested all pages, there are no errors. I am sticking to these two packages till they become outdated and unusable.

Backtrack a few years, at work, we’ve used
Jar y yuicompressor version 2.4.6 to do both JavaScript and CSS minifications, it does not handle multiple input files, my boss has written a Windows PowerShell script to process multiple files into a single output minification file. I have tried the latest, which is version 2.4.8 – and it fails on me: I’m using some ES6 features.

As demonstrated, both UglifyJS 3 and UglifyCSS handle multiple input files quite nicely. And UglifyJS 3 supports ES6.

I hope you find this useful. Thank you for reading. And stay safe as always.