What is the best way to write a clientlib for a component ?

[monish_gavali]

Create a separate clientlib for an individual component or write the whole code inside clientlib-site ?

I have seen in WKND project they have written all the css for components inside clientlibs-site and including that clientlibs in page properties.So is this a prefered way ?

[AsifChowdhury · Accepted solution]

Hi @monish_gavali 

When integrating CSS and JS files into a single clientlib, you benefit from a reduced number of network calls but may encounter performance issues such as larger file sizes and render-blocking. Conversely, using separate clientlibs per component avoids these drawbacks but increases network calls. Cache optimization can mitigate both approaches' performance impacts. In conclusion, for smaller sites, combining into a single clientlib may suffice, while larger sites may benefit from component-wise clientlib loading to avoid unnecessary CSS and JS.

Here you will get details about it and I hope you will get your answer which is best for you.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/clientlibs/m-p/586477/high...

Thanks.

[Imran__Khan]

In place of this it is better to create component specific js and css files within one single folder and assign a single clientlib category. If require we can create on client lib category for reusable code such as header, footer and global popups, T&C, etc. to optimize. 

It will he cumbersome and complex to maintain single js file on the other hand it will be a big file which will impact performance.