How to avoid redundant Js and CSS in AEM

[ajeemaww9196509]

Im developing Component based css & js rather using common resources. Lets say Im using 2 Breadcrumb components in a single page. So here how can I avoid those redundant css and js which are calling for both components. 

[Peter_Puzanovs · Accepted solution]

Dear Ajeem,

By default AEM Clientlibrary would include only 1 version of css and html. E.g. if you drag and drop 2 same 'Breadcrumb components' only 1 css and js would be included.

For two different 'Breadcrumb components' if they reference different css and js in both components then both would be included and you would effectively get more code.

1 Common way to avoid this would be to move your code into a a common ClientLibrary folder and drop there your code that you would like to be shared between all 'Breadcrumb components' .

Regards,

Peter

[sourcedcode]

Hello @ajeemaww9196509,

You're Safe! AEM's client library call script is smart enough to only load in ONE instance of a client library that is being called into a page.

Try having ONE centralised client library (named of clientlib-site), and have that client library embed all the respective client libraries that you are trying to get CSS and JavaScript to load. This is a basic standard practice for AEM sites; take a look at Adobe's template project, where they have a client library called client-base which embeds multiple client libraries - https://github.com/adobe/aem-project-archetype/blob/master/src/main/archetype/ui.apps/src/main/conte.... A common practice is to call client libraries from "base page component" and "editable template policies"; as CSS is loaded before the body, and JS is loaded before when the </body> closes. In special cases, you can embed client libraries called directly into a component, however your rendered HTML static page will have client libraries requests tags in random parts of the code.

To learn more about how to call a client library, checkout Adobe's own knowledge post - https://blogs.adobe.com/experiencedelivers/experience-management/htl-clientlibs/