DEV Community

Cover image for JavaScript and CSS minification.
Be Hai Nguyen
Be Hai Nguyen

Posted on

JavaScript and CSS minification.

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

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
Enter fullscreen mode Exit fullscreen mode

Installing UglifyCSS globally:

npm install uglifycss -g
Enter fullscreen mode Exit fullscreen mode

Their executable scripts are:

C:\Users\behai\AppData\Roaming\npm\uglifyjs
C:\Users\behai\AppData\Roaming\npm\uglifycss
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs