How to avoid redundant Js and CSS in AEM | Community
Skip to main content
ajeemaww9196509
ajeemaww9196509
Level 2
December 19, 2019
Solved

How to avoid redundant Js and CSS in AEM

  • December 19, 2019
  • 2 replies
  • 4175 views

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. 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Peter_Puzanovs

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

2 replies

Peter_Puzanovs
Community Advisor
Peter_PuzanovsCommunity AdvisorAccepted solution
Community Advisor
December 19, 2019

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
    sourcedcode
    Level 2
    December 19, 2019

    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/content/jcr_root/apps/__appsFolderName__/clientlibs/clientlib-base/.content.xml. 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/

      Terms & ConditionsAccessibility statement

      Loading footer...