Enable JS and CSS minification in AEM

The CQ "CQ Html Library Manager" component control the handling of client libraries (JavaScript, CSS) minification to remove CRLF and whitespace characters in order to reduce the size of the file. In Earlier version of CQ with minification enabled OR disabled, both the minified OR unminified library version has the same URL.  

This blog post will take you through the steps on how to enable minification.

You need to go to http://localhost:4502/system/console/configMgr. This is a configuration page listing all the services that has configurations. Just look for ‘HTML Library Manager’ and click it. You will see the configurations like following:

Now check the ‘Minify’ checkbox. That’s it. Now you would get all the js and css in minified form.

This is very important from performance perspective. Less size will take less time over the network resulting in better load time when you render the form.

With AEM 5.6 onwards  enabling minification adds a selector "min", There by differentiates the difference in URL for both minified and unminified version of library. 

• It helps to test both unminified & minified version irrespective of osgi configuration by directly requesting the file from browser. I.e, Once you develop your client library by following [1] you can test directly how much it minifies by adding a selector "min".   Example the granite library the URL for raw (unminified) and minified file looks like [A] & [B].  

[A]   http://<host>:<port>/etc/clientlibs/granite/jquery/granite.js
[B]   http://<host>:<port>/etc/clientlibs/granite/jquery/granite.min.js

• If you have minified enabled in "CQ Html Library Manager" & all your library follows basic functionality of Client Library [1]. Then while restricting access via the Dispatcher make sure to have stricter filter like [C]

[C]
     # enable specific mime types in non-public content directories 
      /0041 { /type "allow" /glob "* *.min.css *"   }  # enable css
      /0044 { /type "allow" /glob "* *.min.js *"    }  # enable javascript