Highlighted

Loading clientlibs by component

Avatar

Avatar

ariellea4070516

Avatar

ariellea4070516

ariellea4070516

09-11-2018

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

Replies

Highlighted

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

09-11-2018

You can call a clientlib from a specific component.

Highlighted

Avatar

Avatar

ariellea4070516

Avatar

ariellea4070516

ariellea4070516

09-11-2018

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.

Highlighted

Avatar

Avatar

ariellea4070516

Avatar

ariellea4070516

ariellea4070516

09-11-2018

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

Highlighted

Avatar

Avatar

Feike_Visser1

Employee

Avatar

Feike_Visser1

Employee

Feike_Visser1
Employee

09-11-2018

The way to do this is to have a category per component

Highlighted

Avatar

Avatar

Ravi_Pampana

MVP

Avatar

Ravi_Pampana

MVP

Ravi_Pampana
MVP

10-11-2018

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

Highlighted

Avatar

Avatar

ariellea4070516

Avatar

ariellea4070516

ariellea4070516

10-11-2018

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

Highlighted

Avatar

Avatar

ariellea4070516

Avatar

ariellea4070516

ariellea4070516

13-11-2018

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.