Whenever we talk about AEM clientlibs comes to a handy tool to deploy all the js and CSS bundled together as a single loaded entity over the page at load event.
For a long time, we always have a common concern to cache the clientlibs on the page to increase the performance. But we always got stuck in an infinite loop when we talk about continuously updating clientlibs and cache becomes overhead for invalidation each time.
So, versioned clientlibs solve this problem for us as it allows to cache CSS and JS to be cached for a longer period of time at the same time as invalidation happens automatically too which in turn reduces the page load time of the website and improves performance as It uses Sling Rewriter to rewrite the client libraries generated by aem and append a unique MD5 value at the end of the client library URL and later it is cached. This MD5 value is unique to the code of ClientLibs. If there is a modification in code or ClientLibs, a new MD5 value will be generated and appended to the client library URL this allows it to recache.
How to implement versioned clientlibs in AEM?
1. Login to http://localhost:4502/crx/de/index.jsp.
2. Navigate to /apps//config and create an nt:unstructured folder by naming it as rewriter.
3. Navigate to /libs/cq/config/rewriter/default, copy the default node and paste it under your project config folder,
4. Select default node and add versioned-clientlibs to transformer types.
5. Along with the rewriter configuration, you’ll also need to configure Apache to send the right headers.
If somehow developers revert to an older version of ClientLibs. Since the MD5 value is unique for the codebase, and reverted version of the codebase will have its own MD5 value client library which will be already cached due to longer TTL, and AEM need not generate the ClientLibs again until TTL expires.