Versioned Clientlibs is a very nice addon provided by acs aem commons. It solves one of the key problem that most of the customer face now a days, to keep their css and js cached on client side for longer TTL(Time to Live).
It allows css and javascript which is served by aem clientlibs to be cached at client side for very long time which in turns reduce the page load time of the website and improve performance.
Note:- Before Versioned Clientlibs , normal client library it is advised to keep small TTL.
It allows css and javascript which is served by aem clientlibs to be cached at client side for very long time which in turns reduce the page load time of the website and improve 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 at client browser. As the ttl was small, once it is expired new client libraries are fetched but at 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 amount of network requests to the server.
In order to increase website page performance speed we used to cache these client libraries on 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 uses Sling Rewriter to rewrite the client libraries generated by aem and append a unique MD5 value at end of the client library url. After modification to client library, a new MD5 value is generated and appended to client library url this allows it to recache at client side.
Versioned clientlibs uses Sling Rewriter to rewrite the client libraries generated by aem and append a unique MD5 value at end of the client library url. After modification to client library, a new MD5 value is generated and appended to client library url this allows it to recache at 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 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 default node and add versioned-clientlibs to transformer types as shown below.
We can add any number to 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 type are mentioned then it will take more time time for rewriting.
Remove other transformer types if we don’t need them. If many transformer type are mentioned then it will take more time time for rewriting.
How to Verify Versioned Clientlibs:-
For loading versioned clientlibs for the first time we need to restart 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 sling rewriter. That means our configuration is applied successfully.