Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Minification not working for JS/CSS

niks1
Level 3
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
markus_bulla_adobe
Correct answer by
Employee
Employee

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

5 Replies
Dipti_Chauhan
Community Advisor
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

Dipti_Chauhan
Community Advisor
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?
niks1
Level 3
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
markus_bulla_adobe
Correct answer by
Employee
Employee

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

niks1
Level 3
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 ?
markus_bulla_adobe
Employee
Employee

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
Level 3
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
markus_bulla_adobe
Employee
Employee
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
Level 4
Level 4

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

kchaurasiya
Level 6
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.