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

[Abhishekty]

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.

[JeevanRaj]

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

[milind_bachani · Accepted solution]

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

[Anish-Sinha]

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'}"/>

[Abhishekty]

Thanks @Anish-Sinha 

[anika_agarwal]

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?

[VuongNguyen]

You have two approaches:

1. Apply JavaScript to all components for use in cq:dialog purposes. For details, refer to: https://www.flagtick.com/snippet/aem/show-hide-dialog-fields-with-a-checkbox-in-aem/

2. Apply JavaScript to specific components. For more information, refer to the relevant documentation here.https://www.flagtick.com/snippet/aem/include-client-libraries-in-aem-component/
   https://www.flagtick.com/snippet/aem/add-clientlibs-in-aem-component/

Hopefully, these references will be useful for you.