Minification not working for JS/CSS

[niks1]

Hi All,

We tried to implement js/css minification in our AEM setup. It worked for author and publisher but not working for dispatcher.

we used this - https://www.aemquickstart.in/2016/04/enable-js-and-css-minification.html link.

[Dipti_Chauhan]

Hi @niks1 

   Can you please explain what is not working in dispacher. Are you getting error while accessing css with min selector?

Thanks

Dipti

[niks1]

@Dipti_Chauhan - i am not seeing minified file in dispatcher

[Dipti_Chauhan]

Hi @niks1 So you are able to access css using min selector but you not seeing any difference with min or without min selector? right?

[niks1]

@Dipti_Chauhan - Like in author and publisher , i can see - https://<Ip address>/etc.clientlibs/abc/clientlibs/clientlib-base.min.js but in dispatcher or live enviornment it is coming as https://<ip address>/etc.clientlibs/abc/clientlibs/clientlib-base.js

[markus_bulla_adobe · Accepted solution]

Hi @niks1!

Minification should be enabled on the AEM publish and potentially author instance. Once done - through the OSGI configuration Day CQ HTML Library Manager as outlined in the linked article - AEM delivers all ClientLibraries minified.

The Dispatcher has no active task in minification. What you need to do though is adding the adjusted URLs (including the ".min." selector) to the dispatcher filter rules to 1. allow the dispatcher to deliver the files and not block them and 2. potentially allow the dispatcher to cache the minified files.

You are requesting these files using the ".min." selector as mentioned in the referenced article, right? (See different URLs of ClientLibs [A] vs. [B] in that article)

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

While you're on it, I would also highly recommend to have a look at the Versioned ClientLibs feature of AEM ACS Commons. It will add a hash selector to the URL and ensure that you are always referencing the latest version of your ClientLibs. The Hash will change whenever the ClientLib changes, so you can cache existing ClientLibs files indefinitely on both, dispatcher and in the client/browser.

If this information is not what you were looking for, please provide some more details on what's "not working for dispatcher".

Hope that helps!

[niks1]

@markus_bulla_adobe - Thanks for the reply. we did this in dispatcher we allowed the .min but still in our live environment we are not seeing the issue. Regarding versioning clientlib.. post implementation can this be having minified version ?

[markus_bulla_adobe]

Hi @niks1!

Have you invalidated/cleared your dispatcher cache after implementation/activation of the minifaction? If you're seeing things correctly on the AEM instance (no dispatcher involved) but are experiencing issues through dispatcher this is most likely a caching issue.

Also: yes, Versioned Clientlibs do support minification as well.

Hope that helps!

[niks1]

Yes . we cleared the dispatcher cache as well.

[niks1]

@markus_bulla_adobe - I implemented versioned Clientlib on our instance. Now i am seeing JS/CSS as - https://<localhost>/etc.clientlibs/abc/clientlibs/clientlib-base.50da7ec3366d3067987086c1c70cc5f7.css how to confirm it is minifed version ... as i am not .min in the url

[markus_bulla_adobe]

Hi! I just double checked on my local installation and as soon as I activate both, minification in HTML Library Manager and the rewriting for Versioned ClientLibs I do get minified and versioned clientlib references. Please double check on your configuration.

[RajaShankar]

Hi Niks,

Once you set the minify option in HTML Manager Configuration. Try restarting the bundle Adobe Granite UI Clientlibs com.adobe.granite.ui.clientlibs  by stop/start. Then access your web page by clearing cache in browser you should see js files in network tab getting appended with abc.min.js as shown below.

Sample We Retail URL after minification:

http://localhost:4502/etc.clientlibs/weretail/clientlibs/clientlib-base.min.js

[kchaurasiya]

@niks1 Already well explained by @markus_bulla_adobe . I never get chance to check the client minification on the dispatcher side. For the learning purpose I just tried the same thing on my local dispatcher and i added the minification properties on the AEM author as per the below snapshot and  minification is also working on dispatcher as well.I do not see any minification issue on the dispatcher end.

You can also check whether you have cleared the cache or not.

Thank You.

[vijayabhaskar]

Please go through this video https://www.youtube.com/watch?v=uNWGA42fiiQ it was very well explained Kudos!!