How to only bundle the authored components clientLibs...

[Kailash07]

Hello All

I am new to AEM world so excuse me for semantics. 

We are having page performance issue reported by LH specifically for mobile strategy. One of the reason we found that bundled clientLibs are having extra JS of components which are even not present on the page ie not authored. We have component specific clientLibs so our component which represents a page is embed with list of all possible configurable components clientLibs. Now content author are configuring only subset from all mentioned components but when page is rendered it bundles the Js of all mentioned clientLibs. Is there out of box option to restrict bundling only authored components for that page ? We are just exploring the options to achieve this, Please help us to explore in right direction. Can this be achieved either by :

1) Extending the Html library manager

2) Hook-up page publish work-flow

Thanks in advance

Kailash

[Mayank_Gandhi]

@kautuk_sahni  Please move the query to core.

[Anudeep_Garnepudi]

Hi @Kailash07 

Check out the below article, might help. Came across this as @kautuk_sahni liked it in LinkedIn 

https://www.initialyze.com/blog/2020/11/how-to-use-dynamic-imports-with-adobe-aem/

[Kailash07]

Thanks @anudeep. Will take a look.

[Kailash07]

@Anudeep_Garnepudi. I just gone through the article and found the archType used is the different one where we don't have ui.frontend as submodule so first we have to opt this archType to go ahead. Do you guys foresee performance overheads of extending the HTMLLibraryManager and then identifying what are components are there on the page so load specific clientLibs only ? Thanks Kailash