Generate Dynamic Client Library based Components added in the Page | Community
Skip to main content
Mahedi_Sabuj
Community Advisor
Mahedi_SabujCommunity Advisor
Community Advisor
August 5, 2023
Solved

Generate Dynamic Client Library based Components added in the Page

  • August 5, 2023
  • 3 replies
  • 1368 views

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?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by joerghoh

    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?

    3 replies

    joerghoh
    Adobe Employee
    joerghohAdobe EmployeeAccepted solution
    Adobe Employee
    August 5, 2023

    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
      Community Advisor
      Mahedi_SabujCommunity AdvisorAuthor
      Community Advisor
      August 7, 2023

      Hi @joerghoh, 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.

      Mahedi Sabuj
        aanchal-sikka
        Community Advisor
        aanchal-sikkaCommunity Advisor
        Community Advisor
        August 6, 2023

        @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?

        Aanchal Sikka
          Mahedi_Sabuj
          Community Advisor
          Mahedi_SabujCommunity AdvisorAuthor
          Community Advisor
          August 6, 2023

          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.

          Mahedi Sabuj
            Nupur_Jain
            Adobe Employee
            Nupur_JainAdobe Employee
            Adobe Employee
            August 7, 2023

            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

              Terms & ConditionsAccessibility statement

              Loading footer...