cq:includeClientLib in a component that might be part of a teaser

[Joel_Triemstra1]

I'm having some challenges around clientlibs and personalization. It seems like one of the real strong benefits of the clientlib concept is the ability to put a cq:includeClientLib tag on a component, and let AEM manage only including it on the page once. However, this breaks down when using the personalization functionality, where HTML fragments are loaded via Ajax.

As an example, I tried this with the Adaptive Image component. I created a page with a parsys. I dragged an adaptive image onto the parsys and set an image for it, then I dragged a teaser onto the parsys, and set the campaign and strategy. The campaign had a single offer page, which had an adaptive image on it. When I loaded the page, I could see that the cq:includeClientLib in the adaptive image's JSP was causing some libraries to be loaded twice, and causing some to initialize twice, so that in the final state the page actually displayed three images instead of the two that it should have.

As we're thinking through the complexities of initializing various libraries when content is loaded via Ajax, I'm starting to think that the clientlib idea may not be providing a whole lot of value beyond minifying and concatenating, and maybe it would simpler to use straight JS/CSS includes, or RequireJS behavior.

Any thoughts on how people have tackled this?

[Lokesh_Shivalingaiah · Accepted solution]

You will have to be really careful when you create clientlibs at component. 

Any clientlib which is already a part of your global clientlib, they you can just mention that clientlib as a dependency to your local component clientlib such that it doesnt reloads again ! So essentially, before including any js as part of a clientlib, make sure it is not part of any other !