Dynamic Client Libraries generation specific to page | Community
Skip to main content
E
Eakambaram
Level 3
February 4, 2022
Solved

Dynamic Client Libraries generation specific to page

  • February 4, 2022
  • 2 replies
  • 1776 views

In general AEM development we will try to include all components client libs into one client lib (using client libs embed property).

With this approach we are loading all the css/js where components on a particular page may not be using all that css/js as we might have dragged and dropped few components on to that page. With this approach we are getting reports from Google stating we have unused java script/css on the page.

Ex - 

We have 50 components, we will load all 50 components java script/css in one client lib and load that onto a page.

On any specific page we may not be using all those 50 components, we might be using 10 or 15 components. Remaining component's Java script/CSS is un used on this page.

 

Do we have any way we can generate client libs dynamically only for those components used/dragged and dropped onto a page and include. This way we can solve the unused java script/css problem reported by google on the page/site.

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 DEBAL_DAS

If I understood your problem correctly so you have 50 (random number) authorable components like breadcrumb, heroimage, text, textimage etc and you have included all 50 components java script/css in one client lib and load that onto a page after drag and drop.

 

Now if we take a look at weretail component structure then we could see each component is having their own clientlib and their respective clientlib is having only relevant Java script or CSS.

We have followed similar approach in our project also. We aren't adding all components java script/css in one clientlib [ we didn't create any common clientlib with huge number of CSS or JS files]. 

I feel some level of refactoring would be required and we should embed only relevant clientlib.

 

Personally I know using sling context aware configuration we could dynamically include clientlib category in HTL code for pages comes under specific taxonomy something like between sitepath and clientlibcategory.

 

 

2 replies

DEBAL_DAS
DEBAL_DASAccepted solution
New Member
February 5, 2022

If I understood your problem correctly so you have 50 (random number) authorable components like breadcrumb, heroimage, text, textimage etc and you have included all 50 components java script/css in one client lib and load that onto a page after drag and drop.

 

Now if we take a look at weretail component structure then we could see each component is having their own clientlib and their respective clientlib is having only relevant Java script or CSS.

We have followed similar approach in our project also. We aren't adding all components java script/css in one clientlib [ we didn't create any common clientlib with huge number of CSS or JS files]. 

I feel some level of refactoring would be required and we should embed only relevant clientlib.

 

Personally I know using sling context aware configuration we could dynamically include clientlib category in HTL code for pages comes under specific taxonomy something like between sitepath and clientlibcategory.

 

 

Debal Das, Senior AEM Consultant
    Mahedi_Sabuj
    Community Advisor
    Mahedi_SabujCommunity Advisor
    Community Advisor
    July 16, 2023

    Hi @eakambaram @debal_das, Can you please share a working example? 

    Currently, We are loading Client-libraries 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 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 client libraries? 

    Mahedi Sabuj
    Sanjay_Bangar
    Community Advisor
    Sanjay_BangarCommunity Advisor
    Community Advisor
    February 5, 2022

    Hi @eakambaram ,

        If you want load page specific js and CSS right.

    You need to add that specific clientslibs to your editable template in page policy.

    Means whenever you have created page using that editable template then specific js and CSS called only not the other.

     

    Kr,

    Sanjay

      Terms & ConditionsAccessibility statement

      Loading footer...