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?
Solved! Go to 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?
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?
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.
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?
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.
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:
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
Views
Likes
Replies