Bundle specific external npm packages into a different clientlibrary in ui.frontend

[Souvik_Chakraborty911]

Hi,

Is it possible to bundle some specific npm packages / js+css files into discrete packages in ui.frontend and then reference them? Similar to how we bundle clientlib-base now (but with a different name).

Thanks

Souvik

[milind_bachani · Accepted solution]

Hi @Souvik_Chakraborty911 ,

Did you checkout following blog for code splitting :
https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/aem-ui-frontend-module-cod...

Also, refer dynamic chunking in following blog:
https://blog.acolad.com/how-to-create-dynamic-chunks-of-react-code-in-aem

Best,

Milind

[Rohit_Utreja]

Hi @Souvik_Chakraborty911,

Yes, It is possible.

You can create a new clientlibs with a new folder structure in ui.frontend. Include all related custom code in it. Register it as a clientlib in the ui.frontend module.

Now, Add the dependency of this clientlibs in your actual clientlibs. 

Please refer below URL for more details.

https://blog.3sharecorp.com/aem-code-splitting-dynamic-imports-typescript

I hope it helps.