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.

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

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

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay