Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How I can include a client library based on component, AEM 6.5 ?

Avatar

Level 4

Hi,

 

Actually I need to be develop sharing component future and it will have some Javascript code so I am thinking, if this component will be added on the page then only this code will be added on the existing or new Client lib.

 

I think it is possible, if yes please suggest any example or blog?

if any better suggestions for this kindly suggest.

 

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

Hi @Abhishekty ,

 

These are blogs which talks about approaches you can follow for clientlibs : 

https://aem4beginner.blogspot.com/clientlibs-in-aem63-part2
https://www.blueacornici.com/blog/best-approaches-clientlibs-aem-part-3/



Also, the thread might interest you :
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/best-practices-to-manage-c...



For component specific clientlib, you need to create a cq:ClientLibrary Folder with categories for each component and include that particular category in your sightly. However the major drawback is that the clientlib is loaded for all the components independently present on the page, which means that if you are using same component multiple times on the page , the relevant clientlib will be loaded multiple times.
(More JS/CSS -> More data transfer -> More page load time).

 

However, you can refer the links shared and choose the best approach based on your requirement as it is subjective to use case.


Please feel free to reach out in case of further queries, many thanks.

 

Regards,

Milind

View solution in original post

5 Replies

Avatar

Community Advisor

Hi @Abhishekty 

 

You can create a component specific clientLib and include the clientLib in your component. That way this component specific clientLib will be loaded only if the component is added to the page.

Let me know if this works for your usecase.

 

Thanks

Avatar

Correct answer by
Employee Advisor

Hi @Abhishekty ,

 

These are blogs which talks about approaches you can follow for clientlibs : 

https://aem4beginner.blogspot.com/clientlibs-in-aem63-part2
https://www.blueacornici.com/blog/best-approaches-clientlibs-aem-part-3/



Also, the thread might interest you :
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/best-practices-to-manage-c...



For component specific clientlib, you need to create a cq:ClientLibrary Folder with categories for each component and include that particular category in your sightly. However the major drawback is that the clientlib is loaded for all the components independently present on the page, which means that if you are using same component multiple times on the page , the relevant clientlib will be loaded multiple times.
(More JS/CSS -> More data transfer -> More page load time).

 

However, you can refer the links shared and choose the best approach based on your requirement as it is subjective to use case.


Please feel free to reach out in case of further queries, many thanks.

 

Regards,

Milind

Avatar

Employee Advisor

Hi @Abhishekty ,
You can create a client library folder and provide a specific category name. Include the component specific css and JS code in that client library. Now you can include that client library in your component html file. For example, for custom-component, there will be a file custom-component.html, include these lines as per your need,

 

You can include both css and js using the below syntax:

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.all @ categories=['Category-name']}"/>
 
You can load JS and CSS separately wherever needed
<div data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" />
        <!-- Loading only CSS -->
        <sly data-sly-call="${clientlib.css @ categories='category-name'}"/
         <!-- Loading only JS -->
         <sly data-sly-call="${clientlib.js @ categories='category-name'}"/>
 
 

Avatar

Level 3

In this context, i have a similar scenario where we are using core component and style system. Now with style system my css file size will increase. Now is there a way to optimize the load of required CSS only in case of specific core components getting used in that page?