Expand my Community achievements bar.

SOLVED

Minification not working for JS/CSS

Avatar

Level 3

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.

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

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!

View solution in original post

13 Replies

Avatar

Community Advisor

Hi @niks1 

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

 

Thanks

Dipti

Avatar

Community Advisor
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?

Avatar

Level 3
@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

Avatar

Correct answer by
Employee Advisor

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!

Avatar

Level 3
@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 ?

Avatar

Employee Advisor

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!

Avatar

Level 3
@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

Avatar

Employee Advisor
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.

Avatar

Community Advisor

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.

Rajashankar_0-1625057306128.png

Sample We Retail URL after minification:

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

Avatar

Level 6

@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.

kchaurasiya_0-1625057782293.png

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

 

Thank You.