Generate Dynamic Client Library based Components added in the Page

[Mahedi_Sabuj]

Currently, We are loading Client-libraries in Components using HTL like below:

<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories=['apps.aem-demo.components.content.external-link-popup'], defer=true}">
  ${clientlibs.jsAndCssIncludes @ context="unsafe"}
</sly>

If we follow this approach, for 20 distinct components, 20 http request will execute to download JS/CSS files from the server. Is there any way to generate a dynamic client library which will embed all the 20 component in single client library?

[Jörg_Hoh · Accepted solution]

There is no such approach yet. Because in that case you would create a clientlibrary for every single page. And that would lead to a much higher traffic if you visit 2 or more pages of your site.

But why are 20 HTTP requests bad, when you can use HTTP/2?

[Mahedi_Sabuj]

Hi @Jörg_Hoh, Basically, I wanted to understand is there any better approach to generate clientlibs. Based on the feedback received, it appears that the current approach to generate clientlibs is considered satisfactory. Thanks.

[aanchal-sikka]

@Mahedi_Sabuj 

Can't we add the component specific libraries as dependencies to site specific library? That way it will be just 1 thats generated?

Apologies, if I have misunderstood the question. Wondering whats the difference between dynamic and general client libraries. Can you please elaborate?

[Mahedi_Sabuj]

Hi @aanchal-sikka, In case of site-specific libraries containing numerous unused component-specific dependencies, we aim to implement an approach that selectively adds only the necessary component-specific libraries to each page. By doing so, we can enhance the page's loading speed and overall efficiency.

[Nupur_Jain]

Hi @Mahedi_Sabuj 

The approach you are thinking to include clientlibs based on included components on page does not seem feasible as well as it will not support the purpose of clientlibs:

1. How are you going to maintain clientlibs paths that will be specific to page. If you even make different paths, it will be difficult to maintain caching and flushing.
2. If you go by same clientlib path but different content based on page, then you will have to disable caching at browser and dispatcher and cdn level which is then eventually going to impact overall page performance.
   
   

I guess the best is to divide components based on some group and create clientlibs for each group and add then accordingly.

Hope it helps!

Thanks

Nupur