Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

Loading clientlibs by component

Avatar

Level 3

In AEM 6.4, is there a way to call clientlibs by component instead of loading all CSS and JS on every page?

7 Replies

Avatar

Level 10

You can call a clientlib from a specific component.

Avatar

Level 3

So using ui:includeClientLib then? Ok, I'll need to find a way to rewrite the src's and href's because that approach exposes the internal structure of the application.

Avatar

Level 3

smacdonald2008​ I'm curious, what method would you use to call a clientlib from a specific component?

Avatar

Community Advisor

Hi,

You can add clientlibs folder under each component and add category name to clientlibs folder like below

categories="[componentspecificname]"

Add the clientlibs inside component jsp/html

JSP:

<cq:includeClientLib categories="categoryname" /> -- This includes both js/css files

<cq:includeClientLib js="categoryname"/> -- To include only js

<cq:includeClientLib css="categoryname"/> -- To include only css

Sightly:

HTL and ClientLibs

This will include multiple js/css files on the page as each component will include a js/css files. Also, if clientlibs are added in /apps user everyone should have read access of /apps for files to load in publisher or clientlibs needs to create under /etc/designs

Avatar

Level 3

I thought ‘cq’ was deprecated since AEM 5.3. Shouldn’t we be using ui now?

Avatar

Level 3

Also, this solution injects clientlibs in the body of the page, which defeats the purpose of a component-based architecture (increasing the performance of an app) by forcing the client to re-render the page. And adding <link .. /> to the body is invalid, 'link' tags should only be added in the head of a document.