Dynamic Client Libraries generation specific to page

[Eakambaram]

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.

[DEBAL_DAS · Accepted solution]

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.

[Mahedi_Sabuj]

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? 

[Sanjay_Bangar]

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