Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How to avoid redundant Js and CSS in AEM

Avatar

Level 2

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. 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

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

Avatar

Level 2

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/