Versioned ClientLibs in AEM

Versioned Clientlibs is a very nice addon provided by acs aem commons. It solves one of the key problems that most customers face nowadays, to keep their CSS and js cached on the client-side for longer TTL(Time to Live).

It allows CSS and javascript which are served by AEM clientlibs to be cached at the client-side for a very long time which in turn reduces the page load time of the website and improves performance.

Note:- Before Versioned Clientlibs, normal client library it is advised to keep small TTL.
Because once client libraries are modified or updated, it should be reflected in the client browser. As the TTL was small, once it is expired new client libraries are fetched but at the cost of page load time and inconsistent data until TTL expires.
The main reason to use clientlibs is to concatenate all of our separate CSS files into one file & concatenate all of our JS files in another file to improve page performance speed, by limiting the number of network requests to the server.
In order to increase website page performance speed, we used to cache these client libraries on the client browser with longer TTL. But what happens, when we modify our client libraries (js /CSS files), as it is cached at end-user will keep on viewing old/inconsistent data. To solve this problem acs commons has introduced Versioned Clientlibs in AEM

Versioned clientlibs use Sling Rewriter to rewrite the client libraries generated by AEM and append a unique MD5 value at the end of the client library URL. After modification to the client library, a new MD5 value is generated and appended to the client library URL this allows it to recache at the client-side.

Normal AEM Client Library Url:- http://localhost:4502/etc.clientlibs/weretail/clientlibs/clientlib-base.js
Versioned Client Library Url:- http://localhost:4502/etc.clientlibs/weretail/clientlibs/clientlib-base.f2e70583096c942b4b71351437bce842.js
Implement Versioned Client library
Login to http://localhost:4502/crx/de/index.jsp
Navigate to /apps/weretail/config and create a nt: unstructured folder by name it as a rewriter
Navigate to /libs/cq/config/rewriter/default, copy the default node and paste it under your project config folder, in our case under /apps/weretail/config.

Select the default node and add versioned-clientlibs to transformer types as shown below.

We can add any number of transformers to your default node, transformers are used by sling rewriter to rewrite clientlibs into versioned clientlibs.
Click Save All.
That’s it, we have successfully configured versioned clientlibs in aem.
Note:- Minimum transformer required for creating version clientlibs are transformerTypes=”[linkchecker,versioned-clientlibs]”/>,

Remove other transformer types if we don’t need them. If many transformer types are mentioned then it will take more time for rewriting.
How to Verify Versioned Clientlibs:-
For loading versioned clientlibs for the first time, we need to restart the AEM instance.
Navigate to Felix console–> Status –> Sling Rewriter http://localhost:4502/system/console/status-slingrewriter


Search for our resource path /apps/weretail/config/rewriter/default.
We see our resource path under the sling rewriter. That means our configuration is applied successfully.